简单易懂的React魔法(24):用React Router 参

到目前为止，我们一直读取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项目，浏览器的返回键也会工作正常。

新的list页面显示了多个项目以供用户选择，三个链接指向同一个Detail页面