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