学习笔记——react路由跳转时传参

╰半橙微兮° 2022-09-12 06:50 308阅读 0赞

使用react路由时，需要在路由跳转时，向下一个组件传递参数。

1. params中传参

  1. 首先在Route组件中path属性配置 **/:id**。
  3. <Route path="/product/detail/:id" component={ ProductDetail } />

可以进行标签跳转和代码跳转两种方式，在跳转路径后面拼接 /具体参数。

  1. <!-- 代码跳转 -->
  2. <Button type="primary" size="small" onClick={ () => { this.props.history.push("/product/detail/" + record.id) } }>跳转</Button>
  4. <!-- 标签跳转 -->
  5. <Link to={ "/product/detail/" + record.id } >跳转</Link>

在目标页面可以通过 this.props.match.params.id 接受传递参数。

发表评论

表情：
评论列表 （有 0 条评论，308人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue路由跳转+路由传参

    之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。 比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。 而常见的写法就是： locat

    骑猪看日落骑猪看日落/ 0 赞/ 752 阅读