React学习手册

React Router

｜

269

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

export const Home = () =>

<div className="home">

<h1>[Company Website]</h1>

<nav>

<Link to="about">[About]</Link>

<Link to="events">[Events]</Link>

<Link to="products">[Products]</Link>

<Link to="contact">[Contact Us]</Link>

</nav>

</div>

现在用户可以在网站主页上通过单击链接访问任意内部页面了。浏览器的“后退”按

钮将会把用户带回主页面。

Router

属性

React Router

会将属性传递给它渲染的组件。比如，我们可以通过属性获得当前的位

置。接下来将使用当前路径来帮助用户创建一个“

404 Not Found

”组件：

export const Whoops404 = (

{ location }

) =>

<div className=

”

whoops-404

”

>

<h1>Resource not found at '

{location.pathname}

'</h1>

</div>

当用户输入的路径不存在时，

router

将会向用户渲染显示

Whoops404

组件。渲染完毕

后，