`<NavLink>`

一个 <NavLink> 是一个特殊的 <Link>，它知道自己是否处于“active”，“pending”或“transitioning”状态。这在以下几种情况下很有用

构建导航菜单，例如面包屑或一组选项卡，您希望显示其中哪个选项卡当前被选中
它为屏幕阅读器等辅助技术提供有用的上下文
它提供一个“transitioning”值，让您对视图过渡进行更细粒度的控制

import { NavLink } from "react-router-dom";

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

默认 `active` 类

默认情况下，当 <NavLink> 组件处于活动状态时，会向其添加一个 active 类，因此您可以使用 CSS 对其进行样式设置。

<nav id="sidebar">
  <NavLink to="/messages" />
</nav>

#sidebar a.active {
  color: red;
}

`className`

className 属性的工作原理与普通 className 相同，但您也可以将一个函数传递给它，以根据链接的活动和挂起状态自定义应用的类名。

<NavLink
  to="/messages"
  className={({ isActive, isPending, isTransitioning }) =>
    [
      isPending ? "pending" : "",
      isActive ? "active" : "",
      isTransitioning ? "transitioning" : "",
    ].join(" ")
  }
>
  Messages
</NavLink>

`style`

style 属性的工作原理与普通 style 属性相同，但您也可以将一个函数传递给它，以根据链接的活动和挂起状态自定义应用的样式。

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

`children`

您可以将一个渲染道具作为子元素传递，以根据活动和挂起状态自定义 <NavLink> 的内容，这对于更改内部元素的样式很有用。

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

`end`

end 属性会更改 active 和 pending 状态的匹配逻辑，使其仅匹配 NavLink 的 to 路径的“末尾”。如果 URL 比 to 更长，它将不再被视为活动状态。

链接	当前 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
`<NavLink to="/tasks/" end />`	`/tasks`	false
`<NavLink to="/tasks/" end />`	`/tasks/`	true

关于根路由链接的说明

<NavLink to="/"> 是一个特殊情况，因为每个 URL 都匹配 /。为了避免默认情况下每个路由都匹配它，它实际上会忽略 end 属性，并且仅在您位于根路由时才匹配。

`caseSensitive`

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

链接	URL	isActive
`<NavLink to="/SpOnGe-bOB" />`	`/sponge-bob`	true
`<NavLink to="/SpOnGe-bOB" caseSensitive />`	`/sponge-bob`	false

`aria-current`

当 NavLink 处于活动状态时，它会自动将 <a aria-current="page"> 应用于底层的锚点标签。请参阅 MDN 上的aria-current。

`reloadDocument`

reloadDocument 属性可用于跳过客户端路由，并让浏览器正常处理过渡（就像 <a href> 一样）。

`unstable_viewTransition`

unstable_viewTransition 属性通过将最终状态更新包装在 document.startViewTransition() 中，为该导航启用视图过渡。默认情况下，在过渡期间，将向 <a> 元素添加一个 transitioning 类，您可以使用它来自定义视图过渡。

a.transitioning p {
  view-transition-name: "image-title";
}

a.transitioning img {
  view-transition-name: "image-expand";
}

<NavLink to={to} unstable_viewTransition>
  <p>Image Number {idx}</p>
  <img src={src} alt={`Img ${idx}`} />
</NavLink>

您也可以使用 className/style 属性或传递给 children 的渲染道具，根据 isTransitioning 值进行进一步自定义。

<NavLink to={to} unstable_viewTransition>
  {({ isTransitioning }) => (
    <>
      <p
        style={{
          viewTransitionName: isTransitioning
            ? "image-title"
            : "",
        }}
      >
        Image Number {idx}
      </p>
      <img
        src={src}
        alt={`Img ${idx}`}
        style={{
          viewTransitionName: isTransitioning
            ? "image-expand"
            : "",
        }}
      />
    </>
  )}
</NavLink>

请注意，此 API 被标记为不稳定，可能会在没有重大版本的情况下发生重大更改。

<NavLink>

默认 active 类

className

style

children

end

caseSensitive

aria-current

reloadDocument

unstable_viewTransition