react路由

在座的各位都是菜杯

于 2022-02-22 21:19:45 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/coderYYA/article/details/123077708

本文详细解读了动态路由中的参数传递方式，包括params、state和search，分别介绍了如何通过props进行暴露、传递和取值，以及它们在不同场景下的使用特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态路由参数

params传的参数是暴露在url中的   // 且后代路由都会接收到该参数                                              // 主
需要 先声明 后注册传递参数

注册声明 <Route path=' /sort/:id '   component={Sort}></Route>

传递参数 this.props.history.push(  '/sort/'+'2'  )、

取值 props.match.params.id（函数式组件）

state传的参数是加密的    // 且后代路由不会接收到该参数，  重要的一点 ：  history模式下刷新也可以保持住参数                 // 主
无需声明，直接注册使用即可

传递参数 props.history.push({ pathname: path, state: { name: '孙悟空' } })

取值 props.location.state.name（函数式组件）

search(query) 需要解析，所以略过  // 且后代路由都会接收到该参数
无需声明，直接注册使用即可

传递参数 props.history.push({ path, query: { name: ' sunny' } })

取值 this.props.location.query.name