NavLink

• Framework
• Data
• Declarative

Summary

リファレンスドキュメント ↗

<Link> をラップし、アクティブおよび保留状態のスタイル設定のための追加の props を提供します。

• アクティブおよび保留状態に基づいて、クラスがリンクに自動的に適用されます。NavLinkProps.className を参照してください。
  • pending は Framework および Data モードでのみ利用可能です。
• リンクがアクティブな場合、aria-current="page" がリンクに自動的に適用されます。MDN の aria-current を参照してください。
• 状態は、className、style、および children のレンダー props を通じて利用できます。NavLinkRenderProps を参照してください。

<NavLink to="/message">Messages</NavLink>
 
// Using render props
<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</NavLink>

Props

caseSensitive

マッチングロジックを大文字と小文字を区別するように変更します。

children

通常の React children または、リンクのアクティブおよび保留状態を持つオブジェクトを受け取る関数にすることができます。

<NavLink to="/tasks">
  {({ isActive }) => (
    <span className={isActive ? "active" : ""}>Tasks</span>
  )}
</NavLink>

className

状態に対応するクラスが NavLink に自動的に適用されます。

a.active {
  color: red;
}
a.pending {
  color: blue;
}
a.transitioning {
  view-transition-name: my-transition;
}

または、NavLinkRenderProps を受け取り className を返す関数を指定することもできます。

<NavLink className={({ isActive, isPending }) => (
  isActive ? "my-active-class" :
  isPending ? "my-pending-class" :
  ""
)} />

discover

リンクの lazy route discovery 動作を定義します。

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

<Link /> // default ("render")
<Link discover="render" />
<Link discover="none" />

end

active および pending 状態のマッチングロジックを、NavLinkProps.to の「末尾」のみに一致するように変更します。URL が長い場合、アクティブとは見なされなくなります。

<NavLink to="/"> は例外的なケースです。なぜなら、すべての URL が / に一致するからです。デフォルトでこのマッチングがすべてのルートで行われるのを避けるために、事実上 end prop は無視され、ルートにいる場合にのみ一致します。

prefetch

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

<Link /> // default
<Link prefetch="none" />
<Link prefetch="intent" />
<Link prefetch="render" />
<Link prefetch="viewport" />

• none - デフォルト、プリフェッチなし
• intent - ユーザーがリンクにホバーまたはフォーカスしたときにプリフェッチします。
• render - リンクがレンダリングされるときにプリフェッチします。
• viewport - リンクがビューポート内にあるときにプリフェッチします。モバイルに非常に便利です。

プリフェッチは HTML <link rel="prefetch"> タグを使用して行われます。これらはリンクの後に挿入されます。

<a href="..." />
<a href="..." />
<link rel="prefetch" /> // 条件付きでレンダリングされる可能性があります

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

preventScrollReset

リンクがクリックされ、アプリが ScrollRestoration を使用している場合に、スクロール位置がウィンドウの上部にリセットされるのを防ぎます。これは、新しい場所でスクロールが上部にリセットされるのを防ぐだけであり、戻る/進むボタンのナビゲーションではスクロール位置が復元されます。

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

relative

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

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

親ルートパターンが "blog" で、子ルートパターンが "blog/:slug/edit" であるルート階層を考えてみましょう。

• route - デフォルト、ルートパターンを基準にしてリンクを解決します。上記の例では、"..." の相対リンクは、:slug/edit セグメントを削除して "/blog" まで戻ります。
• path - パスを基準にするため、"..." は /blog/:slug まで 1 つの URL セグメントのみを削除します。

インデックスルートおよびレイアウトルートはパスを持たないため、相対パスの計算には含まれません。

reloadDocument

リンクがクリックされたときに、クライアント側のルーティングではなくドキュメントナビゲーションを使用します。ブラウザは、通常どおりにトランジションを処理します（<a href> のように）。

<Link to="/logout" reloadDocument />

replace

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

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

style

スタイルは、NavLinkRenderProps を受け取りスタイルを返す関数を介して動的に適用することもできます。

<NavLink to="/tasks" style={{ color: "red" }} />
<NavLink to="/tasks" style={({ isActive, isPending }) => ({
  color:
    isActive ? "red" :
    isPending ? "blue" : "black"
})} />

to

文字列または部分的な Path にすることができます。

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

viewTransition

このナビゲーションの View Transition を有効にします。

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

トランジションに特定のスタイルを適用するには、useViewTransitionState を参照してください。