向路由组件传递参数

陈小同学

已于 2022-07-25 11:07:08 修改

阅读量100

点赞数

文章标签：前端 javascript 网络 react.js

于 2022-07-25 11:04:14 首次发布

本文链接：https://blog.csdn.net/xiaoChenPengYou/article/details/125970901

版权

向路由组件传递参数

params参数

- 路由链接（携带参数）：<Link to='/demo/test/tom/18'}>详情</Link>
- 注册路由（声明接收）：<Route path="/demo/test/:name/:age"component={Test}/>
- 接z收参数：this.props.match.params

search参数

- 路由链接（携带参数）：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
- 注册路由（无需声明，正常注册即可）：<Route path="/demo/test"component={Test}/>
- 接收参数：this.props.location.search
- 备注：获取到的search.是urlencoded编码字符串，需要借助querystringi解析，脚手架直接引用即可

state参数

- 路由链接（携带参数）：<Link to:={{path:'/demo/test',state:{name:'tom',age:18}}>详情</Link>
- 注册路由（无需声明，正常注册即可）：<Route path="/demo/test"component={Test}/>
- 接收参数：this.props.location.state
- 备注：刷新也可以保留住参数