简单易懂的React魔法(23):使用React Router

我们需要一个链接从List页面到Detail页面，不过我们不会像你想的那样做。一个有经验的前端一般都会用<a href="/什么页面">点我</a>来做跳转。

可是这里不同了。因为React Router 有更好的解决办法 <Link>组件。它看起来很像我们曾经习惯的HTML标签，它好的地方在于可以自动知道组件在哪里，并且可以调整链接的样式。

所以，我们修改List.js。让他包含一个React Router 链接到Detail 页面。这需要从React Router引入Link，然后使用它，很容易的。
在这之前先安装 react-router-dom，因为这个组件涉及了dom操作。
在终端关闭本地服务器并运行:

npm install --save react-router-dom

修改List.js内容如下：

src/pages/List.js

import { Link } from 'react-router-dom'

class List extends React.Component {
    render() {
        return (
            <div>
                <p>Please choose a repository from the list below.</p>
                <ul>
                    <li><Link to="/react">React</Link></li>
                </ul>
            </div>
        );
    }
}

export default List;

重新打开webpack-dev-server
尝试跳转到react 目录下，应该一切正常。