<Link>

クライアントサイドルーティングでのナビゲーションを可能にする <a href> ラッパー。

import { Link } from "@remix-run/react";
 
<Link to="/dashboard">ダッシュボード</Link>;

useResolvedPath ドキュメントの Splat Paths セクションで、スプラットルート内の相対 <Link to> の動作に関する future.v3_relativeSplatPath future フラグに関する注意点をご覧ください。

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 /> {/* デフォルトは "render" */}
  <Link discover="none" />
</>

• render - デフォルト、リンクがレンダリングされるときにルートを検出します
• none - 積極的に検出せず、リンクがクリックされた場合にのみ検出します

prefetch

リンクのデータとモジュールのプリフェッチ動作を定義します。

<>
  <Link /> {/* デフォルトは "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" /> {/* 条件付きでレンダリングされる可能性があります */}
</nav>

このため、nav :last-child を使用している場合は、スタイルが最後のリンク（およびその他の同様のセレクター）から条件付きで外れないように、nav :last-of-type を使用する必要があります。

preventScrollReset

<ScrollRestoration> を使用している場合、これにより、リンクがクリックされたときにスクロール位置がウィンドウの上部にリセットされるのを防ぐことができます。

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

これは、ユーザーが戻る/進むボタンでその場所に再び戻ったときにスクロール位置が復元されるのを防ぐものではなく、ユーザーがリンクをクリックしたときにリセットされるのを防ぐだけです。

      ┌─────────────────────────┐
      │                         ├──┐
      │                         │  │
      │                         │  │ スクロール
      │                         │  │ アウト
      │                         │  │
      │                         │ ◄┘
    ┌─┴─────────────────────────┴─┐
    │                             ├─┐
    │                             │ │ ビューポート
    │   ┌─────────────────────┐   │ │
    │   │  タブ   タブ   タブ    │   │ │
    │   ├─────────────────────┤   │ │
    │   │                     │   │ │
    │   │                     │   │ │
    │   │ コンテンツ          │   │ │
    │   │                     │   │ │
    │   │                     │   │ │
    │   └─────────────────────┘   │ │
    │                             │◄┘
    └─────────────────────────────┘
 

relative

リンクの相対パスの動作を定義します。

<Link to=".." />; // デフォルト: "route"
<Link relative="route" />;
<Link relative="path" />;

• route - デフォルト、ルート階層に対する相対パス。したがって、.. は現在のルートパターンのすべての URL セグメントを削除します
• path - パスに対する相対パス。したがって、.. は 1 つの URL セグメントを削除します

reloadDocument

リンクがクリックされたときにクライアントサイドルーティングの代わりにドキュメントナビゲーションを使用します。ブラウザはトランジションを通常どおりに処理します（<a href> の場合と同様）。

<Link to="/logout" reloadDocument />

replace

replace プロパティは、履歴スタックに新しいエントリをプッシュする代わりに、履歴スタックの現在のエントリを置き換えます。

<Link replace />

# このような履歴スタックの場合
A -> B

# 通常のリンククリックは新しいエントリをプッシュします
A -> B -> C

# ただし、`replace` を使用すると、B は 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>
  クリックしてください
</Link>

このビュー遷移に特定のスタイルを適用する必要がある場合は、useViewTransitionState() も活用する必要があります。

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