react路由传参的几种方式

一枕黄粱-web

已于 2022-08-10 15:56:14 修改

阅读量852

点赞数 1

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

于 2022-08-10 15:52:47 首次发布

本文链接：https://blog.youkuaiyun.com/jstljspservlet/article/details/126268009

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