NavLink

<NavLink>是一种特殊的<Link>，它知道自己是否处于“活动”或“挂起”状态。

import { NavLink } from "react-router-dom"
<NavLink to="/messages" className={({isActive, isPending}) => isPending ? "pending" : isActive ? "active" : ""}>
  Messages
</NavLink>

默认active类名

默认情况下，当一个<NavLink>组件处于活动状态时，会添加一个active类。

className

className 属性的作用类似于普通的className，但你还可以传递一个函数来自定义应用于链接的类名，基于链接的活动状态和挂起状态。

<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</NavLink>

style

style 属性的作用类似于普通的样式属性，还可以通过传递一个函数来自定义样式，基于链接的活动状态和挂起状态。

<NavLink
  to="/messages"
  style={({ isActive, isPending }) => {
    return {
      fontWeight: isActive ? "bold" : "",
      color: isPending ? "red" : "black",
    };
  }}
>
  Messages
</NavLink>

children

render props 作为子项传递，根据活动和挂起状态自定义内容。

<NavLink to="/tasks">
  {({ isActive, isPending }) => (
    <span className={isActive ? "active" : ""}>Tasks</span>
  )}
</NavLink>

end

end 属性更改了匹配逻辑，使得active和pending状态，只要匹配到NavLink的to路径的结尾。如果URL长度超过to，则不再被视为活动状态。

Link	URL	isActive
<NavLink to="/tasks" />	/tasks	true
<NavLink to="/tasks" />	/tasks/123	true
<NavLink to="/tasks" end/>	/tasks	true
<NavLink to="/tasks" end/>	/tasks/123	false

caseSensitive

添加caseSensitive属性会改变匹配逻辑，使其区分大小写。

aria-current

当NavLink处于活动状态时，它会自动应用于底层锚点标记 <a aria-current="page">