学习react路由传参（仅供学习参考）

1、params传参

使用params传参需要再注册路由时使用占位符接收参数。

路由链接：<Link to="{`/home/${id}/${name}`}"></Link>

注册路由：<Route path="/home/:id/:name" component={home}/>

接收参数：const{id,name} = this.props.match.params

2、search参数

使用search传参可以正常注册路由，在接收时可以通过插件querystring来解析参数(也可以自己处理参数）

路由链接：<Link to="{`/home/?id=${id}&name=${name}`}"></Link>

注册路由：<Route path="/home" component={home}/>

接收参数：

import qs from 'querystring'

const {search}= this.props.location

const {id,name} = qs.parse(search)

2、state参数(在路径上不会体现传的参数，但刷新页面也能保留参数，前俩者亦能）

使用search传参可以正常注册路由，但在传参时使用对象进行传参

路由链接：<Link to="{{pathname:'/home',state:{id,name}}}"></Link>

注册路由：<Route path="/home" component={home}/>

接收参数：

const {id,name}= this.props.location.state||{}