一、params传参
1,刷新页面后参数不消失,
2,参数会在地址栏显示
3,需要在Route中配置参数名称
1、params传递单个参数
路由页面
<Route path="/production/:productionId" component={production} />
使用Link传参
<Link to={‘/production/’ + '105'}>跳转</Link>
或者
<Link to={{pathname: '/production/' + '105'}}>跳转</Link>
使用js传参
this.props.router.push('/production/'+'105');
或者
this.props.router.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.router.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.router.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.router.push({pathname:'/production',state:{productionId:12,productionType:'fruits'}});
获取参数
this.props.location.state