Link

`<Link>`

<a href> ラッパーは、クライアントルーティングによるナビゲーションを実現します。

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

<Link to="/dashboard">ダッシュボード</Link>;

useResolvedPath ドキュメントの [Splat Paths][relativesplatpath] セクションを参照して、splat ルートにおける 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][lazy-route-discovery] を使用する際のルート発見の動作を定義します。

<>
  <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>][scroll-restoration-component] を使用している場合、リンクをクリックしたときにスクロール位置をウィンドウのトップにリセットするのを防ぎます。

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

ユーザーが戻る/進むボタンを使用してその位置に戻るとき、これによりスクロール位置の復元は妨げられません。これは、ユーザーがリンクをクリックしたときにリセットを防ぐだけです。

ディスカッション

この動作が必要な例として、ページの上部にない URL 検索パラメータを操作するタブリストがあります。リンクをクリックしたときにスクロール位置がトップにジャンプするのを避けたいです。これにより、切り替えた内容がビューポートからスクロールアウトしてしまう可能性があります！

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

`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][history-state] の上に実装されているため、サーバーではアクセスできません。

`viewTransition`

viewTransition プロパティは、最終状態の更新を [document.startViewTransition()][document-start-view-transition] でラップすることで、このナビゲーションに [View Transition][view-transitions] を有効にします：

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

このビュー変換に特定のスタイルを適用する必要がある場合は、[useViewTransitionState()][use-view-transition-state] を利用する必要があります：