React路由传参常见的几种方式
React路由传参解释:路由传参完成的是组件之间的数据传递(组件传值)1)、params路由配置:<Route path='/Inbox/:id' component={Inbox} />路由跳转(传值):声明式导航:<NavLink to={'/Inbox/01008'} >铅笔</NavLink>编程式导航:this.props.history.push
·
React路由传参
解释:路由传参完成的是组件之间的数据传递(组件传值)
1)、params
路由配置:
<Route path='/Inbox/:id' component={Inbox} />
路由跳转(传值):
声明式导航:
<NavLink to={'/Inbox/01008'} >铅笔</NavLink>
编程式导航:
this.props.history.push( '/Inbox/'+'01008' )
取值:
this.props.match.params.id
优势 : 刷新,参数依然存在
缺点 : 只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。
2)、query
路由配置:
不用改变路由配置。
<Route path='/Inbox' component={Inbox} />
路由跳转(传值):
声明式导航:
<Link to={{pathname:'/Inbox',query:{id:'01009'}}} >铅笔</Link>
编程式导航:
this.props.history.push( {pathname:'/Inbox',query:{id:'01009'}} )
取值:
this.props.location.query.id
优势:传参优雅,传递参数可传对象;
缺点:刷新地址栏,参数丢失(不管是hash方式,还是Browser模式都会丢失参数)
3)、state
同query差不多,只是属性不一样,而且state传的参数是加密的,query传的参数是公开的,只需要把query改为state即可。
路由配置:
不用改变路由配置。
<Route path='/Inbox' component={Inbox} />
路由跳转(传值):
声明式导航
<Link to={{pathname:'/Inbox',state:{id:'01009'}}} >铅笔</Link>
编程式导航
this.props.history.push({pathname:'/Inbox',state:{id:"01"}});
取值:
this.props.location.state.id
优势:传参优雅,传递参数可传对象
缺点:刷新地址栏,(hash方式会丢失参数,Browser模式不会丢失参数)
4)、search
路由配置:
不用改变路由配置。
<Route path='/Inbox' component={Inbox} />
传值:
声明式导航
<Link to='/Inbox?a=1&b=2' >铅笔</Link>
编程式导航
this.props.history.push({pathname:'/Inbox',search:'?a=1&b=2'})
取值:
this.props.location.search
用location.search所获取的是查询字符串,所以,还需要进一步的解析,自己自行解析,也可以使用第三方模块:qs,或者nodejs里的query-string
更多推荐
所有评论(0)