NavLink

• 框架
• 数据
• 声明式

概述

参考文档 ↗

包装了 Link，并添加了用于样式化活动（active）和待处理（pending）状态的额外 props。

• 根据链接的活动（active）和待处理（pending）状态自动为链接应用类名，详见 NavLinkProps.className。
• 当链接处于活动状态时，自动为链接应用 aria-current="page" 属性。详见 MDN 上的 aria-current。

import { NavLink } from "react-router";
<NavLink to="/message" />;

状态通过 className、style 和 children render props 可用。详见 NavLinkRenderProps。

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

Props

caseSensitive

更改匹配逻辑使其区分大小写

children

可以是常规的 React 子元素，或者是一个接收包含链接的活动（active）和待处理（pending）状态的对象函数。

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

className

类名会根据状态自动应用到 NavLink。

a.active {
  color: red;
}
a.pending {
  color: blue;
}
a.transitioning {
  view-transition-name: my-transition;
}

注意，pending 状态仅在框架（Framework）和数据（Data）模式下可用。

discover

定义链接的发现行为

<Link discover="render" />

• render - 默认值，在链接渲染时发现路由
• none - 不急于发现，仅在点击链接时发现

end

更改 active 和 pending 状态的匹配逻辑，使其仅匹配 NavLinkProps.to 的“末尾”。如果 URL 更长，则不再被视为活动状态。

<NavLink to="/"> 是一个特殊情况，因为每个 URL 都会匹配 /。为了避免默认匹配所有路由，它会忽略 end prop，仅在你位于根路由时匹配。

prefetch

定义链接的数据和模块预取行为。

<Link prefetch="intent" />

• none - 默认，不进行预取
• intent - 当用户悬停或聚焦链接时预取
• render - 当链接渲染时预取
• viewport - 当链接进入视口时预取，对于移动设备非常有用

预取使用 HTML <link rel="prefetch"> 标签完成。它们被插入到链接之后。

<a href="..." />
<a href="..." />
<link rel="prefetch" /> // might conditionally render

正因如此，如果你使用 nav :last-child，你需要改用 nav :last-of-type，这样样式就不会有条件地脱离你的最后一个链接（以及任何其他类似的选择器）。

preventScrollReset

当点击链接且应用使用 ScrollRestoration 时，阻止滚动位置重置到窗口顶部。这仅阻止新位置将滚动重置到顶部，对于前进/后退按钮导航，滚动位置将会被恢复。

<Link to="?tab=one" preventScrollReset />

relative

定义链接的相对路径行为。

<Link to=".." /> // default: "route"
<Link relative="route" />
<Link relative="path" />

考虑一个路由层级结构，其中父路由模式是 "blog"，子路由模式是 "blog/:slug/edit"。

• route - 默认，根据路由模式解析链接。在上面的示例中，相对链接 ".." 将移除 :slug/edit 这两个片段，回到 "/blog"。
• path - 相对于路径，因此 .. 只会移除一个 URL 片段，直到 "/blog/:slug"

reloadDocument

点击链接时，将使用文档导航而非客户端路由：浏览器将像处理普通的 <a href> 一样正常处理过渡。

<Link to="/logout" reloadDocument />

replace

替换历史堆栈中的当前条目，而不是向其推送新条目。

<Link replace />

# with a history stack like this
A -> B

# normal link click pushes a new entry
A -> B -> C

# but with `replace`, B is replaced by C
A -> C

state

向下一个位置添加持久的客户端路由状态。

<Link to="/somewhere/else" state={{ some: "value" }} />

位置状态可以通过 location 访问。

function SomeComp() {
  const location = useLocation();
  location.state; // { some: "value" }
}

此状态在服务器上不可访问，因为它是在 history.state 之上实现的。

style

常规的 React 样式对象，或者一个接收包含链接活动（active）和待定（pending）状态的对象的函数。

<NavLink to="/tasks" style={{ color: "red" }} />
<NavLink to="/tasks" style={({ isActive, isPending }) => ({
  color:
    isActive ? "red" :
    isPending ? "blue" : "black"
})} />

注意，pending 状态仅在框架（Framework）和数据（Data）模式下可用。

to

可以是一个字符串或一个部分 Path

<Link to="/some/path" />

<Link
  to={{
    pathname: "/some/path",
    search: "?query=string",
    hash: "#hash",
  }}
/>

viewTransition

为此次导航启用 View Transition。

<Link to={to} viewTransition>
  Click me
</Link>

要应用特定的过渡样式，请参阅 useViewTransitionState