Link

<Link>

<a href> 包装器可实现通过客户端路由进行导航。

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

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

请参阅 useResolvedPath 文档中的 Splat Paths 部分，了解有关 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() 中来为此导航启用 View Transition：

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