`<NavLink>`

用额外的道具包装 <Link> 以为活动状态和待定状态设置样式。

import { NavLink } from "@remix-run/react";

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

自动属性

`.active`

当 <NavLink> 组件处于活动状态时，会添加一个 active 类，因此您可以使用 CSS 为其设置样式。

<NavLink to="/messages" />

a.active {
  color: red;
}

`aria-current`

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

`.pending`

当 <NavLink> 组件在导航过程中处于待定状态时，会添加一个 pending 类，因此您可以使用 CSS 为其设置样式。

<NavLink to="/messages" />

a.pending {
  color: red;
}

`.transitioning`

一个 transitioning 类被添加到 <NavLink viewTransition> 组件中，当它在导航期间进行转换时，因此您可以使用 CSS 为其设置样式。

<NavLink to="/messages" viewTransition />

a.transitioning {
  view-transition-name: my-transition;
}

道具

`className` 回调

回调带活动状态和待定状态，允许您自定义应用的类名。

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

`style` 回调

回调带活动状态和待定状态，允许您自定义应用的样式。

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

`children` 回调

回调带活动状态和待定状态，允许您自定义 <NavLink> 的内容。

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

`end`

end 道具会更改 active 和 pending 状态的匹配逻辑，以仅匹配到 NavLinks 的 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="/"> 是一个特殊情况，因为每个 URL 都匹配 /。为了避免这种情况默认情况下匹配每条路由，它有效地忽略了 end 道具，并且只在您处于根路由时匹配。

`caseSensitive`

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

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

`viewTransition`

viewTransition 道具通过将最终状态更新包装在视图转换中来为此导航启用 document.startViewTransition()。默认情况下，在转换期间，一个 transitioning 类将被添加到 <a> 元素中，您可以使用它来自定义视图转换。

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

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

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

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

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

`<Link>` 道具

支持 <Link> 的所有其他道具。

<NavLink>

自动属性

.active

aria-current

.pending

.transitioning

道具

className 回调

style 回调

children 回调

end

caseSensitive

viewTransition

<Link> 道具