NavLink

<NavLink>

追加のプロパティを使用して <Link> をラップし、アクティブ状態と保留状態のスタイルを設定します。

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

<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  メッセージ
</NavLink>

自動プロパティ

.active

<NavLink> コンポーネントがアクティブ状態のとき、active クラスが追加されるため、CSS を使用してスタイルを設定できます。

<NavLink to="/messages" />

a.active {
  color: red;
}

aria-current

NavLink がアクティブ状態のとき、底層のアンカータグに自動的に <a aria-current="page"> が適用されます。MDN の aria-current を参照してください。

.pending

ナビゲーション中に <NavLink> コンポーネントが保留状態のとき、pending クラスが追加されるため、CSS を使用してスタイルを設定できます。

<NavLink to="/messages" />

a.pending {
  color: red;
}

.transitioning

ナビゲーション中に変換が行われているとき、<NavLink viewTransition> コンポーネントに transitioning クラスが追加されるため、CSS を使用してスタイルを設定できます。

<NavLink to="/messages" viewTransition />

a.transitioning {
  view-transition-name: my-transition;
}

プロパティ

className コールバック

アクティブおよび保留状態を使用して、適用されるクラス名をカスタマイズするためのコールバックを使用します。

<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  メッセージ
</NavLink>

style コールバック

アクティブおよび保留状態を使用して、適用されるスタイルをカスタマイズするためのコールバックを使用します。

<NavLink
  to="/messages"
  style={({ isActive, isPending }) => {
    return {
      fontWeight: isActive ? "bold" : "",
      color: isPending ? "red" : "black",
    };
  }}
>
  メッセージ
</NavLink>

children コールバック

アクティブおよび保留状態を使用して、<NavLink> の内容をカスタマイズするためのコールバックを使用します。

<NavLink to="/tasks">
  {({ isActive, isPending }) => (
    <span className={isActive ? "active" : ""}>タスク</span>
  )}
</NavLink>

end

end プロパティは、active および pending 状態のマッチングロジックを変更し、NavLinks の to パスの 末尾 のみをマッチさせます。URL が to より長い場合、もはやアクティブ状態とは見なされません。

Link	URL	isActive
<NavLink to="/tasks" />	/tasks	true
<NavLink to="/tasks" />	/tasks/123	true
<NavLink to="/tasks" end />	/tasks	true
<NavLink to="/tasks" end />	/tasks/123	false

<NavLink to="/"> は例外であり、すべての URL が / に一致します。デフォルトのマッチを避けるため、end プロパティは効果的に無視され、ルートルートにいるときのみ一致します。

caseSensitive

caseSensitive プロパティを追加すると、マッチングロジックが大文字と小文字を区別するようになります。

Link	URL	isActive
<NavLink to="/SpOnGe-bOB" />	/sponge-bob	true
<NavLink to="/SpOnGe-bOB" caseSensitive />	/sponge-bob	false

viewTransition

viewTransition プロパティは、最終状態の更新を [document.startViewTransition()][document-start-view-transition] でラップすることで、このナビゲーションに View Transition を有効にします。デフォルトでは、変換中に [transitioning クラス][transitioning-class] が [<a> 要素][a-element] に追加され、これを使用してビュー変換をカスタマイズできます。

a.transitioning p {
  view-transition-name: "image-title";
}


a.transitioning img {
  view-transition-name: "image-expand";
}

<NavLink to={to} viewTransition>
  <p>画像番号 {idx}</p>
  <img src={src} alt={`Img ${idx}`} />
</NavLink>

isTransitioning 値に基づいて、さらにカスタマイズするために [className][class-name-prop]/[style][style-prop] 属性や [children][children-prop] に渡されたレンダリングプロパティを使用できます。

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

<Link> プロパティ

<Link> のその他のすべてのプロパティがサポートされています。