React路由传参常见的几种方式

首页 / 新闻资讯 / 正文

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