• 官方例子使用 React router 定义路由时，我们可以给指定一个 path，然后指定通配符可以携带参数到指定的path： 首先定义路由
  1. import { Router,Route,hashHistory} from 'react-router';
  3. class App extends React.Component {
  4.   render() {
  5.     return (
  6.         <Router history={hashHistory}>
  7.             <Route path='/user/:name' component={UserPage}></Route>
  8.         </Router>
  9.     )
  10.   }
  11. }

  • 上面指定参数 name

    1. //使用
    2. import {Link,hashHistory} from 'react-router';
    3. // 1.Link组件实现跳转：
    4. <Link to="/user/sam">用户</Link>
    5. // 2.history跳转：
    6. hashHistory.push("/user/sam");
    7. // 当页面跳转到UserPage页面之后，取出传过来的值：
    8. export default class UserPage extends React.Component{
    9.   constructor(props){
    10.       super(props);
    11.   }
    12.   render(){
    13.       return(<div>this.props.params.name</div>)
    14.   }
    15. }

  • 上面的方法可以传递一个或多个值，但是每个值的类型都是字符串，没法传递一个对象，如果传递的话可以将json 对象转换为字符串，然后传递过去，传递过去之后再将 json 字符串转换为对象将数据取出来，如：

    1. //定义路由
    2. <Route path='/user/:data' component={UserPage}></Route>
    3. //使用
    4. var data = {id:3,name:sam,age:36};
    5. data = JSON.stringify(data);
    6. var path = `/user/${data}`;
    7. <Link to={path}>用户</Link>
    8. hashHistory.push(path);
    9. //获取数据
    10. var data = JSON.parse(this.props.params.data);
    11. var {id,name,age} = data;

优点：简单快捷,并且，在刷新页面的时候，参数不会丢失。
缺点：只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋

query

  • query 方式使用很简单，类似于表单中的 get 方法，传递参数为明文：
    1. // 定义路由
    2. <Route path='/user' component={UserPage}></Route>
    3. //这么去使用
    4. var data = {id:3,name:sam,age:36};
    5. var path = {
    6. pathname:'/user',
    7. query:data,
    8. }
    9. <Link to={path}>用户</Link>
    10. hashHistory.push(path);
    11. //获取数据
    12. var data = this.props.location.query;
    13. var {id,name,age} = data;

优点：优雅，可传对象
缺点：刷新页面，参数丢失

state

  1. //定义路由
  2. <Route path='/user' component={UserPage}></Route>
  3. //使用
  4. var data = {id:3,name:sam,age:36};
  5. var path = {
  6.   pathname:'/user',
  7.   state:data,
  8. }
  9. <Link to={path}>用户</Link>
  10. hashHistory.push(path);
  11. //获取数据：
  12. var data = this.props.location.state;
  13. var {id,name,age} = data;

优点：优雅，可传对象，且优于 query 的是，他传递的参数在地址栏是加密的，而 query 在地址栏是不加密的
缺点：刷新页面，参数丢失