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