链接

概述

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

import { Link } from "react-router";

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

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

属性

discover

定义链接发现行为

<Link discover="render" />

render - 默认，当链接渲染时发现路由
none - 不立即发现，仅在链接被点击时发现

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

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。