`<Link>`

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

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

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

请查看 Splat 路径关于 useResolvedPath 文档中关于 future.v3_relativeSplatPath 未来标志在 splat 路由中相对 <Link to> 行为的说明部分

Props

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