到目前為止，我們一直讀取GitHub上的React項(xiàng)目的細(xì)節(jié)仇哆。是時(shí)候開始使用更多不同的項(xiàng)目了醒叁。具體來說我們希望用戶在List組件中選擇React，React Native 和Jest消痛。然后為每個(gè)項(xiàng)目加載相應(yīng)的Detail組件且叁，目前在index.js中定義了這兩個(gè)路由：
src/index.js
<Route exact path="/" component={List} />
<Route path="/react" component={Detail} />
你可能會(huì)認(rèn)為我們會(huì)改成這樣：
<Route exact path="/" component={List} />
<Route path="/react" component={ Detail } />
<Route path="/react-native" component={ Detail } />
<Route path="/jest" component={ Detail } />
當(dāng)然可以這樣做，但是這樣既不靈活也不可擴(kuò)展秩伞。如果我們可以寫成/detail/??? 然后鏈接同一個(gè)組件就會(huì)靈活很多逞带。所以index.js重寫為這樣：
<Route exact path="/" component={List} />
<Route path="/detail/:repo" component={ Detail } />
我們?cè)赨RL后面寫入repo,React Router 會(huì)將‘/detail/’后面的任何文本傳遞給Detail組件。當(dāng)然我們需要在detail頁面對(duì)傳進(jìn)來的參數(shù)做一些處理纱新，但意味著Detail組件現(xiàn)在會(huì)用于“/detail/react”‘/detail/react-native’等展氓。
考慮到寫法，你可能會(huì)認(rèn)為Detail組件里會(huì)有很多的代碼要寫脸爱，其實(shí)不是這樣的带饱。我們只需要修改小部分就可以實(shí)現(xiàn)這個(gè)需求，React Router是很智能的：
在Detail.js中找到fetchFeed()方法:
src/pages/Detail.js
ajax.get(`https://api.github.com/repos/facebook/react/${type}`)
如果你還記得阅羹，上面的代碼使用了ES6語法勺疼。由于React Router傳遞了參數(shù)，我們可以再添加一個(gè)參數(shù)repo捏鱼，修改fetchFeed()方法如下：
src/pages/Detail.js
const baseURL = 'https://api.github.com/repos/facebook';
ajax.get(`${baseURL}/${this.props.match.params.repo}/${type}`)
現(xiàn)在我們會(huì)在請(qǐng)求的url里插入三次执庐，一次插入repo，一次插入baseURL导梆，一次插入type type有三個(gè)值“commit forks pulls” repo根據(jù)用戶點(diǎn)擊轨淌，baseURL是為了不讓代碼變得太長。
最后一步修改List的render()方法：
src/pages/List.js
render() {
return (
<div>
<p>Please choose a repository from the list below.</p>
<ul>
<li><Link to="/detail/react">React</Link></li>
<li><Link to="/detail/react-native">React Native</Link></li>
<li><Link to="/detail/jest">Jest</Link></li>
</ul>
</div>
);
}
保存以上所有更改看尼，然后在瀏覽器中轉(zhuǎn)到http://localhost:8080/ 你應(yīng)該能看到三個(gè)鏈接递鹉，每個(gè)鏈接會(huì)顯示不同的github項(xiàng)目，瀏覽器的返回鍵也會(huì)工作正常藏斩。
