Link

摘要

一个渐进式增强的 <a href> 包装器，用于启用客户端路由导航。

import { Link } from "react-router";

<Link to="/dashboard">Dashboard</Link>;

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

属性

discover

定义链接发现行为

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

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

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 实现的。

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。