到目前为止，我们一直读取GitHub上的React项目的细节。是时候开始使用更多不同的项目了。具体来说我们希望用户在List组件中选择React，React Native 和Jest。然后为每个项目加载相应的Detail组件，目前在index.js中定义了这两个路由：
src/index.js
<Route exact path="/" component={List} />
<Route path="/react" component={Detail} />
你可能会认为我们会改成这样：
<Route exact path="/" component={List} />
<Route path="/react" component={ Detail } />
<Route path="/react-native" component={ Detail } />
<Route path="/jest" component={ Detail } />
当然可以这样做，但是这样既不灵活也不可扩展。如果我们可以写成/detail/??? 然后链接同一个组件就会灵活很多。所以index.js重写为这样：
<Route exact path="/" component={List} />
<Route path="/detail/:repo" component={ Detail } />
我们在URL后面写入repo,React Router 会将‘/detail/’后面的任何文本传递给Detail组件。当然我们需要在detail页面对传进来的参数做一些处理，但意味着Detail组件现在会用于“/detail/react”‘/detail/react-native’等。
考虑到写法，你可能会认为Detail组件里会有很多的代码要写，其实不是这样的。我们只需要修改小部分就可以实现这个需求，React Router是很智能的：
在Detail.js中找到fetchFeed()方法:
src/pages/Detail.js
ajax.get(`https://api.github.com/repos/facebook/react/${type}`)
如果你还记得，上面的代码使用了ES6语法。由于React Router传递了参数，我们可以再添加一个参数repo，修改fetchFeed()方法如下：
src/pages/Detail.js
const baseURL = 'https://api.github.com/repos/facebook';
ajax.get(`${baseURL}/${this.props.match.params.repo}/${type}`)
现在我们会在请求的url里插入三次，一次插入repo，一次插入baseURL，一次插入type type有三个值“commit forks pulls” repo根据用户点击，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>
);
}
保存以上所有更改，然后在浏览器中转到http://localhost:8080/ 你应该能看到三个链接，每个链接会显示不同的github项目，浏览器的返回键也会工作正常。
