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