一、params传参
- 刷新页面后参数不消失
- 参数会在地址栏显示
- 需要在Route中配置参数名称
1、params传递单个参数
路由页面
<Route path="/production/:productionId" component={production} />
- 使用Link传参
<Link to={‘/production/’ + '105'}>跳转</Link>
或者
<Link to={{pathname: '/production/' + '105'}}>跳转</Link>
- 使用js传参
this.props.history.push('/production/'+'105');
或者
this.props.history.push({pathname:'/production/'+'6'});
获取参数
this.props.match.params.productionId
2、params传递多个参数
路由页面
<Route path='/production/:productionId/:productionType' component={production}></Route>
state = {
productionId: 120,
productionType: 'fruits'
}
- 使用Link传参
<Link to={{pathname:`/production/${this.state.productionId}/${this.state.productionType}`}}>跳转</Link>
- 使用js传参
this.props.history.push({pathname:`/demo/${this.state.productionId}/${this.state.productionType}`});
获取参数
this.props.match.params
二、query传参
- 刷新页面后参数消失
- 参数不会在地址栏显示
路由页面（无需配置）
<Route path='/production' component={production}></Route>
- 使用Link传参
<Link to={{pathname:'/production',query:{productionId:120,productionType:'fruits'}}}>跳转</Link>
- 使用js传参
this.props.history.push({pathname:'/production',query:{productionId:120,productionType:'fruits'}});
获取参数
this.props.location.query
三、state传参
- 刷新页面后参数不消失
- 参数不会在地址栏显示
路由页面（无需配置）
<Route path='/production' component={production}></Route>
- 使用Link传参
<Link to={{pathname:'/production',state:{productionId:12,productionType:'fruits'}}}>跳转</Link>
- 使用js传参
this.props.history.push({pathname:'/production',state:{productionId:12,productionType:'fruits'}});
获取参数
this.props.location.state
如果觉得本文对您有帮助的小伙伴可以积极留言或者点赞！🍉🍉🍉
