Link

在各个页面间切换时如果使用锚点元素实现,那么每次点击时页面将被重新加载。React Router 提供了 <Link> 组件用来避免这种状况的发生。当你点击 <Link> 时,URL 会更新,组件会被重新渲染,但是页面不会重新加载。

import { Link } from 'react-router-dom'
const Header = () => (
  <header>
    <nav>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/article'>Article</Link></li>
      </ul>
    </nav>
  </header>
)

<Link> 使用 'to' 参数来描述需要定位的页面。它的值即可是字符串也可是 location 对象(包含pathname,search,hash与state属性)。如果其值为字符串将会被转换为 location 对象:

<Link to={{ pathname: '/article/6' }}>Article #6</Link>

Last updated