我们需要一个链接从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 目录下,应该一切正常。