react 路由传参

1.params

<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname: `/path/${2}`});
读取参数用:this.props.match.params.name

优势 ： 刷新地址栏，参数依然存在
缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

2.query

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>

   this.props.history.push({pathname: "/states", query: {name: 'sunny', age: 100, sex: '男'} });

读取参数用: this.props.location.query

优势：传参优雅，传递参数可传对象；

缺点：刷新地址栏，参数丢失

3.state

<Route path='/states ' component={Sort}/>
<Link to={{ path : ' /states ' , state : { name : 'sunny' }}}>

　this.props.history.push({pathname: "/states", state: {name: 'sunny', age: 100, sex: '男'} });

读取参数用: this.props.location.state 

优缺点同query