简单易懂的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 目录下,应该一切正常。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容