react路由传参的几种方式

params传参(支持多个动态参数) state={ id:88,name:‘Jack’, }
路由页面： 路由跳转并传递参数：
链接方式：/demo/${this.state.id}/${this.state.name}}}>XX

js方式：this.props.history.push({pathname:`/demo/${this.state.id}/${this.state.name}`})
1

获取参数：this.props.match.params //结果 {id: “88”, name: “Jack”}

search传参 javascript // 参数会拼接到地址栏，例如: /personal?test=22222 history.push({pathname: '/personal', search: 'test=22222'}) // 或 history.push({pathname: '/personal?test=22222'}) 获取参数：
this.props.location.search

query传参(刷新页面后参数消失) 路由页面： //无需配置 路由跳转并传递参数： 链接方式： to={{pathname:‘/demo’,query:{id:22,name:‘dahuang’}}}>XX
js方式：this.props.history.push({pathname:‘/demo’,query:{id:22,name:‘dahuang’}})
获取参数： this.props.location.query.name

state传参( 刷新页面后参数不消失，state传的参数是加密的，比query传参好用)

注：state传参的方式只支持BrowserRouter路由，不支持HashRouter

 路由页面：  //无需配置
路由跳转并传递参数：
1
2

链接方式： XX
js方式：this.props.history.push({pathname:‘/demo’,state:{id:12,name:‘dahuang’}})
获取参数： this.props.location.state.name