react-路由组件传递参数的三种方式

整理了一下路由组件传递参数的三种方式

1.params传参

• 路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
• 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
• 接收参数：this.props.match.params

2.search传参

• 路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
• 注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
• 接收参数：this.props.location.search
• 备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

接收参数页面的this.props的返回值如下图所示中的search

我们获取id 和title的值 需要借助node.js中自带的 querystring
import qs from 'querystring'
使用方法

  const { search } = this.props.location
  console.log(qs.parse(search))

打印出来的结果如下

所以需要去掉id前面的?
const {id,title} = qs.parse(search.slice(1))

3.state传参

• 路由链接(携带参数)：<Link to={{pathname:’/demo/test’,state:{name:‘tom’,age:18}}}>详情
• 注册路由(无需声明，正常注册即可)：
• 接收参数：this.props.location.state
• 备注：刷新也可以保留住参数