最近刚入坑react ，上来接手项目  对react路由的传参还是有点模糊的  虽说和vue本质上差不多了 多少  

但是上来就 熟练使用还是比较困难的   还好适应和学习能力 还是有那么一丢丢的  

今天就来整理下 react的路由传参  和 接受参数

react 路由跳转 可以使用  link 或者 navlink  标签 这个玩意 好像和 router-link 有点像  本质上都是封装了 一个a标签  这个 是 标签式跳转导航了 是有三种的

<Link activeClassName="demo" to="/a/2"> params参数传递 </Link>

 <Link activeClassName="demo" to="/b?name=zyc"> search参数传递 </Link>

<Link activeClassName="demo" to={{ pathname: "c", state: {name: 'zyc'} }}> state参数传递 </Link>

<Link activeClassName="demo" to="/a/2"> params参数传递 </Link>
<Link activeClassName="demo" to="/b?name=zyc"> search参数传递 </Link>
<Link activeClassName="demo" to={{ pathname: "c", state: {name: 'zyc'} }}> state参数传递 </Link>

通过params 传参的话  得 先注册一个动态路由的方式呢   这个 搞过vue的童鞋应该都知道的

 <Route exact path="/a/:id" component={A} />

 <Route exact path="/a/:id" component={A} />

其他的路由注册方式 我就不讲解    就是不加动态参数的就是普通路由了 

1.  参数的接收方式 

params 

this.props.match.params;  通过 props 中

  const { id } = this.props.match.params;

search 参数接收

search参数 有点 不好处理 因为 react没有帮我们处理 只好让自己处理  通过node一个  querystring 模块 进行 转化

import qs from "querystring"

  const { name } = qs.parse(props.location.search.slice(1))

  const { name } = qs.parse(this.props.location.search.slice(1))

state 参数  

这种传参偶尔也是会用到的 比如一些不想出现在地址栏的参数 就可以用这种方式 传递

  const { name } = props.location.state || ""

  const { name } = this.props.location.state || ""

最后我们可以获取 演示下 

当然除了 通过link标签的跳转 还有就是 通过js方式跳转   那个通过 props.history 属性对象中的  push  和 replace方法跳转

this.props.history.push('/a/2');
this.props.history.push('/a?name=zyc')；
this.props.history.push('/a', {name: 'zyc'});
  

接受 参数的方式 都是一样

关注我 持续更新 前端知识