react路由传参的几种方式

react路由传参的3种方式：1、params传参；2、query传参；3、state传参。React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

1、params传参

1，刷新页面后参数不消失,
2，参数会在地址栏显示
3，需要在Route中配置参数名称
params传递单个参数
路由页面
使用Link传参
使用js传参

this.props.router.push(‘/production/’+’105’);
或者
this.props.router.push({pathname:’/production/’+’6′});
在另一个页面获取参数

this.props.match.params.productionId
params传递多个参数
路由页面
state = {
productionId: 120,
productionType: ‘fruits’
}
使用Link传参

/production/${this.state.productionId}/${this.state.productionType}}}>跳转
使用js传参

this.props.router.push({pathname:/demo/${this.state.productionId}/${this.state.productionType}});
获取参数

this.props.match.params

2、query传参

路由页面（无需配置）
使用Link传参
使用js传参

this.props.router.push({pathname:’/production’,query:{productionId:120,productionType:’fruits’}});
获取参数

this.props.location.query

3、state传参

刷新页面后参数不消失
参数不会在地址栏显示
路由页面（无需配置）
使用Link传参
使用js传参

this.props.router.push({pathname:’/production’,state:{productionId:12,productionType:’fruits’}});
获取参数

this.props.location.state