`<Link>`

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

import { Link } from "@remix-run/react";

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

请参阅 useResolvedPath 文档中关于 Splat Paths 部分，了解关于 splat 路由中相对 <Link to> 行为的 future.v3_relativeSplatPath future 标志的行为说明

属性

`to: string`

最基本的使用方法是使用 href 字符串

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

`to: Partial<Path>`

你也可以传递一个 Partial<Path> 值

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

`discover`

定义当使用 future.v3_lazyRouteDiscovery 时的路由发现行为。

<>
  <Link /> {/* defaults to "render" */}
  <Link discover="none" />
</>

render - 默认值，在链接渲染时发现路由
none - 不进行预先发现，只在点击链接时发现

`prefetch`

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

<>
  <Link /> {/* defaults to "none" */}
  <Link prefetch="none" />
  <Link prefetch="intent" />
  <Link prefetch="render" />
  <Link prefetch="viewport" />
</>

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

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

<nav>
  <a href="..." />
  <a href="..." />
  <link rel="prefetch" /> {/* might conditionally render */}
</nav>

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

`preventScrollReset`

如果你正在使用 <ScrollRestoration>，这可以让你防止在点击链接时滚动位置被重置到窗口顶部。

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

当用户使用后退/前进按钮回到该位置时，这不会阻止滚动位置的恢复，它只是阻止在用户点击链接时重置。

讨论

你可能需要此行为的一个示例是，页面顶部没有标签列表，这些标签会操作 URL 搜索参数。你不会希望滚动位置跳转到顶部，因为它可能会将切换的内容滚动出视口！

      ┌─────────────────────────┐
      │                         ├──┐
      │                         │  │
      │                         │  │ scrolled
      │                         │  │ out of view
      │                         │  │
      │                         │ ◄┘
    ┌─┴─────────────────────────┴─┐
    │                             ├─┐
    │                             │ │ viewport
    │   ┌─────────────────────┐   │ │
    │   │  tab   tab   tab    │   │ │
    │   ├─────────────────────┤   │ │
    │   │                     │   │ │
    │   │                     │   │ │
    │   │ content             │   │ │
    │   │                     │   │ │
    │   │                     │   │ │
    │   └─────────────────────┘   │ │
    │                             │◄┘
    └─────────────────────────────┘

`relative`

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

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

route - 默认值，相对于路由层级，因此 .. 将删除当前路由模式的所有 URL 段
path - 相对于路径，因此 .. 将删除一个 URL 段

`reloadDocument`

当点击链接时，将使用文档导航而不是客户端路由，浏览器将正常处理过渡（就像它是 <a href> 一样）。

<Link to="/logout" reloadDocument />

`replace`

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

`viewTransition`

viewTransition 属性通过将最终状态更新包装在 document.startViewTransition() 中，为此导航启用视图过渡。

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

如果您需要为此视图过渡应用特定样式，您还需要利用 useViewTransitionState()

function ImageLink(to) {
  const isTransitioning = useViewTransitionState(to);
  return (
    <Link to={to} viewTransition>
      <p
        style={{
          viewTransitionName: isTransitioning
            ? "image-title"
            : "",
        }}
      >
        Image Number {idx}
      </p>
      <img
        src={src}
        alt={`Img ${idx}`}
        style={{
          viewTransitionName: isTransitioning
            ? "image-expand"
            : "",
        }}
      />
    </Link>
  );
}