React Router頁面傳值

本文主要介紹React Router定義路由以後如何傳值，有關React和React Router 
的基礎請參考阮老師的博客

注：本文示例React Router版本爲：3.0.2，使用前請注意檢查版本
原文連接

一.props.params

官方例子使用React router定義路由時，咱們能夠給<Route>指定一個path，而後指定通配符能夠攜帶參數到指定的path： 
首先定義路由到UserPage頁面:

import { Router,Route,hashHistory} from 'react-router';

class App extends React.Component { render() { return ( <Router history={hashHistory}> <Route path='/user/:name' component={UserPage}></Route> </Router> ) } }

上面指定參數一個參數name 

使用：

import {Link,hashHistory} from 'react-router';

1.Link組件實現跳轉：

<Link to="/user/sam">用戶</Link>

2.history跳轉：

hashHistory.push("/user/sam");

當頁面跳轉到UserPage頁面以後，取出傳過來的值：

export default class UserPage extends React.Component{ constructor(props){ super(props); } render(){ return(<div>this.props.params.name</div>) } }

上面的方法能夠傳遞一個或多個值，可是每一個值的類型都是字符串，無法傳遞一個對象,若是傳遞的話能夠將json對象轉換爲字符串，而後傳遞過去，傳遞過去以後再將json字符串轉換爲對象將數據取出來 
如：定義路由：

<Route path='/user/:data' component={UserPage}></Route>

使用：

var data = {id:3,name:sam,age:36}; data = JSON.stringify(data); var path = `/user/${data}`;

1.<Link to={path}>用戶</Link>

2.hashHistory.push(path);

獲取數據：

var data = JSON.parse(this.props.params.data); var {id,name,age} = data;

經過這種方式跳轉到UserPage頁面時只能經過傳遞字符串來傳遞參數，那麼是否有其餘方法來優雅地直接傳遞對象而不單單是字符串呢？

二.query

query方式使用很簡單，相似於表單中的get方法，傳遞參數爲明文： 
首先定義路由：

<Route path='/user' component={UserPage}></Route>

使用：

var data = {id:3,name:sam,age:36}; var path = { pathname:'/user', query:data, }

1.<Link to={path}>用戶</Link>

2.hashHistory.push(path);

獲取數據：

var data = this.props.location.query; var {id,name,age} = data;

query方式能夠傳遞任意類型的值，可是頁面的URL也是由query的值拼接的，URL很長，那麼有沒有辦法相似於表單post方式傳遞數據使得傳遞的數據不以明文傳輸呢？

三.state

state方式相似於post方式，使用方式和query相似， 
首先定義路由：

<Route path='/user' component={UserPage}></Route>

使用：

var data = {id:3,name:sam,age:36}; var path = { pathname:'/user', state:data, }

1.<Link to={path}>用戶</Link>

2.hashHistory.push(path);

獲取數據：

var data = this.props.location.state; var {id,name,age} = data;

state方式依然能夠傳遞任意類型的數據，並且能夠不以明文方式傳輸。

能夠在實現後對比地址欄的URL來觀察三種傳值方式URL的區別