react路由传参的几种方式

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

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

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

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

3. query传参(刷新页面后参数消失) 路由页面： //无需配置 路由跳转并传递参数： 链接方式：<Link
   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

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

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

    路由页面：<Route path='/demo' component={Demo}></Route>  //无需配置
   路由跳转并传递参数：
   

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