<Link>

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

¥A <a href> wrapper to enable navigation with client-side routing.

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

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

请参阅 useResolvedPath 文档中的 Splat 路径 部分，了解 future.v3_relativeSplatPath 未来标志在 splat 路由中相对于 <Link to> 行为的行为

属性

¥Props

to: string

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

¥The most basic usage takes an href string:

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

to: Partial<Path>

你还可以传递 Partial<Path> 值：

¥You can also pass a Partial<Path> value:

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

discover

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

¥Defines the route discovery behavior when using future.v3_lazyRouteDiscovery.

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

• render — 默认，在链接渲染时发现路由

  ¥render — default, discover the route when the link renders

• none — 不主动发现，仅在链接被点击时才发现。

  ¥none — don't eagerly discover, only discover if the link is clicked

prefetch

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

¥Defines the data and module prefetching behavior for the link.

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

• none — 默认，无预取

  ¥none — default, no prefetching

• intent — 预取用户悬停或聚焦链接

  ¥intent — prefetches when the user hovers or focuses the link

• render — 在链接渲染时预取

  ¥render — prefetches when the link renders

• viewport — 当链接位于 viewport 中时进行预加载，这对于移动设备非常有用。

  ¥viewport — prefetches when the link is in the viewport, very useful for mobile

预获取是通过 HTML <link rel="prefetch"> 标签完成的。它们插入到链接之后。

¥Prefetching is done with HTML <link rel="prefetch"> tags. They are inserted after the link.

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

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

¥Because of this, if you are using nav :last-child you will need to use nav :last-of-type so the styles don't conditionally fall off your last link (and any other similar selectors).

preventScrollReset

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

¥If you are using <ScrollRestoration>, this lets you prevent the scroll position from being reset to the top of the window when the link is clicked.

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

这并不妨碍用户使用后退/前进按钮返回到当前位置时恢复滚动位置，只是防止用户点击链接时重置滚动位置。

¥This does not prevent the scroll position from being restored when the user comes back to the location with the back/forward buttons, it just prevents the reset when the user clicks the link.

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

relative

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

¥Defines the relative path behavior for the link.

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

• route — 默认，相对于路由层级，因此 .. 将删除当前路由模式的所有 URL 片段

  ¥route — default, relative to the route hierarchy so .. will remove all URL segments of the current route pattern

• path — 相对于路径，因此 .. 将删除一个 URL 片段

  ¥path — relative to the path so .. will remove one URL segment

reloadDocument

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

¥Will use document navigation instead of client side routing when the link is clicked, the browser will handle the transition normally (as if it were an <a href>).

<Link to="/logout" reloadDocument />

replace

replace 属性将替换历史记录堆栈中的当前条目，而不是将新条目推送到其中。

¥The replace prop will replace the current entry in the history stack instead of pushing a new one onto it.

<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

在下一个位置添加持久客户端路由状态。

¥Adds a persistent client side routing state to the next location.

<Link to="/somewhere/else" state={{ some: "value" }} />

位置状态通过 location 访问。

¥The location state is accessed from the location.

function SomeComp() {
  const location = useLocation();
  location.state; // { some: "value" }
}

由于此状态是在 history.state 之上实现的，因此在服务器上无法访问。

¥This state is inaccessible on the server as it is implemented on top of history.state.

viewTransition

viewTransition 属性通过将最终状态更新封装在 document.startViewTransition() 中，为本次导航启用 查看 Transition：

¥The viewTransition prop enables a View Transition for this navigation by wrapping the final state update in document.startViewTransition():

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

如果你需要为此视图转换应用特定样式，你还需要利用 useViewTransitionState()：

¥If you need to apply specific styles for this view transition, you will also need to leverage the 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>
  );
}