react路由传参

最新推荐文章于 2024-06-05 00:03:37 发布

Luckyoye

最新推荐文章于 2024-06-05 00:03:37 发布

阅读量511

点赞数

分类专栏： react vue 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Luckyoye/article/details/125571161

版权

react 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

复习一下
一：params传参（参数会在地址栏显示）

路由：
 <Route path="/admin/:id">//配置：id（id可以改为别的任何字母）
   <Admin></Admin>
</Route>

路由跳转并且携带参数：（两种方式）
1. <Link to={"/admin/234"}></Link>
2. this.props.history.push("/admin/234")

获取参数
this.props.match.params.id//结果：234

二：query传参

路由：
 <Route path="/admin">
   <Admin></Admin>
</Route>

路由跳转并且携带参数：（四种方式）
1. <Link to={"/admin/?a=1&b=2"}></Link>
2. <Link to={{pathname="/admin",query:{a:1,b:2}}></Link>
3. this.props.history.push({pathname="/admin",query:{a:1,b:2})
4. this.props.history.push("/admin/?a=1&b=2")

获取参数
1.this.props.location.query或者this.props.location.search

三：state传参（不会在地址栏显示，state传参是加密的，不支持hashrouter）

路由：
 <Route path="/admin">
   <Admin></Admin>
</Route>

路由跳转并且携带参数：（四种方式）
1. <Link to={{pathname="/admin",state:{a:1,b:2}}></Link>
2. this.props.history.push({pathname="/admin",state:{a:1,b:2}

获取参数
1.this.props.location.state