<Link>

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

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

スプラットルート内の相対的な <Link to> の動作に関する future.v3_relativeSplatPath の未来フラグの動作については、useResolvedPath ドキュメントの スプラットパス セクションを参照してください。

プロパティ

to: string

最も基本的な使い方は、href 文字列を受け取ります。

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

to: Partial<Path>

Partial<Path> 値を渡すこともできます。

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

discover

future.unstable_fogOfWar を使用する場合、ルートの検出動作を定義します。

<>
  <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 の上に実装されているためです。

unstable_viewTransition

unstable_viewTransition プロパティを使用すると、最終的な状態の更新を document.startViewTransition() でラップすることにより、このナビゲーションの ビュー遷移 を有効にすることができます。

<Link to={to} unstable_viewTransition>
  クリックしてください
</Link>

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

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