doubleyong
管理员
管理员
  • 最后登录2020-12-03
  • 发帖数938
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:233回复:0

[react]React 路由传参的方式总结

楼主#
更多 发布于:2020-10-30 16:49
1. 直接在to属性的值后面加?跟上参数  


通过this.props.location.search 可以得到?及之后的字符串,在自己进行分析



<p><Link to="/productDetail?id=5">商品id:{item.goods_id}</Link></p>
接收: this.props.location.search   //输出为 ?id=5 属性string类型


2. 使用query或params进行传值


<p><Link to=pw_pathname:"/productDetail",query:{id:item.goods_id}>商品id:{item.goods_id}</Link></p>
接收:this.props.location.query.id


<p><Link to=pw_pathname:"/productDetail",params:{id:item.goods_id}>商品id:{item.goods_id}</Link></p>
接收:this.props.location.params.id



<p><Link to=pw_pathname:"/productDetail",state:{id:item.goods_id}>商品id:{item.goods_id}</Link></p>
接收: this.props.location.state.id


同query差不多,只是属性不一样,而且state传的参数是加密的


3. 路由传参


路由的定义中,要定义参数
<Route path="/productDetail/:id" component={ProductDetail}/>


参数以 / 的形式加在路由后面
<p><Link to={"/productDetail/"+item.goods_id}>商品id:{item.goods_id}</Link></p>


接收:this.props.match.params.id


注:设置路由参数,当没有传参数时,不会显示组件,解决方法,在对应参数后面写?,


代码如下:


<Route path="/productDetail/:id?" component={ProductDetail}/>
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号