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 />