<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;
}
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>
endend 属性更改了 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 (否) |
viewTransitionviewTransition 属性通过将最终状态更新包裹在 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> 的所有其他属性。
