react 路由传参总结
2023-04-25 本文已影响0人
云高风轻
1. 前言
- 本篇还是
react-router-dom5x版本的总结
2. 来个表格
- 总结是个好习惯
- 传递案例 都是
history.push()的参数
| 传参方式 | 传递案例 history.push() | 接收方式 | 地址栏是否显示显示 | 刷新界面参数是否还在 |
|---|---|---|---|---|
| search | "/blog/java?job=全栈" | props.location.search字符串 需自己分割 let searchParams = new URLSearchParams(search) let job = searchParams.get("job") | 显示 | 还在 |
| query | {pathname:"/blog/java", query:{id:98765}} | props.location.query.id | 不显示 | 不在 |
| state | {pathname:"/blog/java", state:{name:'yzs'}} | props.location.state.name | 不显示 | 还在 |
| params | 1. path绑定参数<Route exact path="/blog/web/:id" /> {pathname:"/blog/web/2345678"}或者 "/blog/web/2345678" | props.match.params.id | 显示 | 还在 |
