<NavLink>

使用额外的 props 封装 <Link>，用于设置活动状态和待处理状态的样式。

¥Wraps <Link> with additional props for styling active and pending states.

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

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

自动属性

¥Automatic Attributes

.active

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

¥An active class is added to a <NavLink> component when it is active, so you can use CSS to style it.

<NavLink to="/messages" />

a.active {
  color: red;
}

aria-current

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

¥When a NavLink is active it will automatically apply <a aria-current="page"> to the underlying anchor tag. See aria-current on MDN.

.pending

当 <NavLink> 组件在导航过程中处于待处理状态时，会向其添加 pending 类，以便你可以使用 CSS 为其设置样式。

¥A pending class is added to a <NavLink> component when it is pending during a navigation, so you can use CSS to style it.

<NavLink to="/messages" />

a.pending {
  color: red;
}

.transitioning

当 <NavLink viewTransition> 组件在导航过程中进行过渡时，会向其添加 transitioning 类，以便你可以使用 CSS 为其设置样式。

¥A transitioning class is added to a <NavLink viewTransition> component when it is transitioning during a navigation, so you can use CSS to style it.

<NavLink to="/messages" viewTransition />

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

属性

¥Props

className 回调

¥className callback

使用活动状态和待处理状态进行回调，以允许自定义应用的类名。

¥Calls back with the active and pending states to allow customizing the class names applied.

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

style 回调

¥style callback

回调函数，返回 active 和 pending 状态，以允许自定义应用的样式。

¥Calls back with the active and pending states to allow customizing the styles applied.

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

children 回调

¥children callback

使用活动状态和待处理状态进行回调，以允许自定义 <NavLink> 的内容。

¥Calls back with the active and pending states to allow customizing the content of the <NavLink>.

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

end

end 属性将 active 和 pending 状态的匹配逻辑更改为仅匹配 NavLinks 的 to 路径的 "end"。如果 URL 长度超过 to，它将不再被视为有效。

¥The end prop changes the matching logic for the active and pending states to only match to the "end" of the NavLinks's to path. If the URL is longer than to, it will no longer be considered active.

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

¥<NavLink to="/"> is an exceptional case because every URL matches /. To avoid this matching every single route by default, it effectively ignores the end prop and only matches when you're at the root route.

caseSensitive

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

¥Adding the caseSensitive prop changes the matching logic to make it case-sensitive.

viewTransition

viewTransition 属性通过将最终状态更新封装在 document.startViewTransition() 中，为本次导航启用 查看 Transition。默认情况下，在转换过程中，transitioning 类 会被添加到 <a> 元素 中，你可以使用它来自定义视图转换。

¥The viewTransition prop enables a View Transition for this navigation by wrapping the final state update in document.startViewTransition(). By default, during the transition a transitioning class will be added to the <a> element that you can use to customize the view transition.

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 值进行进一步的自定义。

¥You may also use the className/style props or the render props passed to children to further customize based on the isTransitioning value.

<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> props

支持 <Link> 的所有其他属性。

¥All other props of <Link> are supported.