`<Link>`

一個 <a href> 包裝器，用於啟用客戶端路由的導航。

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

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

請參閱 useResolvedPath 文件中關於Splat 路徑的部分，了解在 splat 路由中使用相對 <Link to> 行為的 future.v3_relativeSplatPath 未來標誌的注意事項。

屬性

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