NavLink

摘要

封装了 <Link>，并增加了用于设置活动和待定状态样式的额外属性。

根据链接的 active 和 pending 状态自动应用类，请参阅 NavLinkProps.className
- 请注意，pending 仅在框架和数据模式下可用。
当链接处于活动状态时，会自动向链接应用 aria-current="page"。请参阅 MDN 上的 aria-current。
状态还可以通过 className、style 和 children 渲染属性获得。请参阅 NavLinkRenderProps。

<NavLink to="/message">Messages</NavLink>

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

属性

caseSensitive

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

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

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;
}

或者，您也可以指定一个函数，该函数接收 NavLinkRenderProps 并返回 className

<NavLink className={({ isActive, isPending }) => (
  isActive ? "my-active-class" :
  isPending ? "my-pending-class" :
  ""
)} />

discover

定义链接发现行为

<Link /> // default ("render")
<Link discover="render" />
<Link discover="none" />

render — 默认值，在链接渲染时发现路由
none — 不主动发现，仅在点击链接时发现

end

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

链接	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 属性，并且仅在您处于根路由时才匹配。

prefetch

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

<Link /> // default
<Link prefetch="none" />
<Link prefetch="intent" />
<Link prefetch="render" />
<Link prefetch="viewport" />

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

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

<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

样式也可以通过一个函数动态应用，该函数接收 NavLinkRenderProps 并返回样式。

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

to

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

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

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

viewTransition

为此次导航启用视图过渡。

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

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