Link && NavLink

<Link>

用户可以通过点击它来导航跳转到另一个页面。

props：

• to :设置点击后要跳转的页面地址

  string：to的值为字符串，代表要跳转的路径

  object: to的值为对象，该对象可以包含下列属性：

  • pathname: <string> 表示要链接到的路径

  • search: <string> 查询参数

  • hash: 一个放在URL中的Hash，例如 #a-hash.

  xxxxxxxxxx
  <Link to="/">首页</Link>
  <Link to="/user">用户页面</Link>
  {/*<Link to={{pathname:'/user'}} >用户页面</Link>*/}
  

• reloadDocument:跳过路由，则直接实现<a href/>的功能

• state:location.state参数

<NavLink>

一个特殊的<Link>，它会知道当前被选中的项是哪个。被选中选会添加.active class。

xxxxxxxxxx
<NavLink to="/"  style={({ isActive }) => {
              return isActive ? { color: 'red' } : undefined
            }}>首页</NavLink>
<NavLink to="/user"  style={({ isActive }) => {
              return isActive ? { color: 'red' } : undefined
            }}>用户页面</NavLink>