NavLink

<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

在导航过程中转换时，会向 <NavLink viewTransition> 组件添加一个 transitioning 类，因此您可以使用 CSS 来设置其样式。

<NavLink to="/messages" viewTransition />

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

Props

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 长，则将不再被视为活动状态。

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

<NavLink to="/"> 是一个例外情况，因为每个 URL 都匹配 /。为了避免默认匹配每条路由，它会有效地忽略 end 属性，并且仅在您位于根路由时匹配。

caseSensitive

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

Link	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> 的所有其他属性均受支持。