react-router V4中的url参数

概述

以前写过react在router中传递数据的2种方法，可是有些细节没有理清楚，如今补上，记录下来，供之后开发时参考，相信对其余人也有用。

参考资料：stackoverflow react router redux url

match

若是使用下面这种方式切换路由，那么参数能够经过props.match.params.filter拿到。

<Route path='/:filter' component={App} />

<Link to='active'> Active </Link>

不过要注意2点：

1. filter能够变成其它参数，这个时候props.match.params.filter里面的filter也要变成相应的参数。
2. 只能在component={App}里面的App组件中经过props拿到filter这个参数，在其它组件中拿不到。（即不是组件自身渲染时经过解析url拿到参数的，而是经过props传递过来的。）

location

若是使用下面这种方式切换路由，那么参数data能够经过props.location.data.name拿到。

const linkActive = {
    pathname: 'active',
    data: {name: 'haha'}
}

<Route path='/:filter' component={App} />

<Link to={ linkActive }> Active </Link>

注意：

1. 若是要拿filter仍是经过props.match.params.filter拿到。
2. 只能在component={App}里面的App组件中经过这种方式拿参数。

其它

那么咱们怎么在App以外的组件中得到这个参数呢？

1. 一个办法是让App组件经过传递props给这个组件。
2. 另外一个办法是让App组件把这个参数存入redux里面。
3. 还有一个办法是在这个组件前面加一个路由。（猜测的，没试过）好比这么使用：

<Route path='/:filter' component={List} />
<List />