在 React 中如何进行路由参数传递?
最编程
2024-08-01 19:49:12
...
今天,我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。
ps:进入正题前,先说明一下,以下的所有内容都是在react-router V4的版本下。
1.params
Route定义方式:
<Route path='/path/:name' component={Path}/>
Link组件:
HTML方式
<Link to="/path/通过通配符传参">通配符</Link>
JS方式
this.props.history.push({
pathname:'/shopCarDetail',
params:{
name:'jack'
}
});
参数获取:
this.props.location.params.name // jack
2.query
Route定义方式:
<Route path='/query' component={Query}/>
Link组件:
HTML方式
var query = {
pathname: '/query',
query: {day: 'Friday'}
}
<Link to={query}>query</Link>
JS方式
this.props.history.push({
pathname:'/query',
query:{
day:'Friday'
}
});
参数获取:
this.props.location.query.day // Friday
优点:优雅,可传对象
缺点:刷新页面,参数丢失
3.state
Route定义方式:
<Route path='/state' component={State}/>
Link组件:
HTML方式
var state = {
pathname: '/state',
state: {name: 'sunny'}
}
<Link to={state}>state</Link>
JS方式
this.props.history.push({
pathname:'/state',
state:{
name:'sunny'
}
});
参数获取:
this.props.location.state.name // sunny
优点:优雅,可传对象
缺点:刷新页面,参数丢失