Remix ドキュメント日本語版

English

<NavLink>

<Link>link-component にアクティブ状態と保留状態のスタイリング用の追加プロパティをラップします。

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 unstable_viewTransition>コンポーネントにtransitioningクラスが追加されるため、CSSを使用してスタイリングできます。

<NavLink to="/messages" unstable_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よりも長い場合、アクティブとは見なされなくなります。

リンクURLisActive
<NavLink to="/tasks" />/taskstrue
<NavLink to="/tasks" />/tasks/123true
<NavLink to="/tasks" end />/taskstrue
<NavLink to="/tasks" end />/tasks/123false

<NavLink to="/">は、_すべての_URLが/と一致するため、例外的なケースです。デフォルトですべてのルートに一致しないように、endプロパティを無視し、ルートルートにいる場合にのみ一致するようにします。

caseSensitive

caseSensitiveプロパティを追加すると、マッチングロジックがケースセンシティブになります。

リンクURLisActive
<NavLink to="/SpOnGe-bOB" />/sponge-bobtrue
<NavLink to="/SpOnGe-bOB" caseSensitive />/sponge-bobfalse

unstable_viewTransition

unstable_viewTransitionプロパティは、最終的な状態の更新をdocument.startViewTransition()でラップすることにより、このナビゲーションのビュー遷移を有効にします。デフォルトでは、遷移中はtransitioningクラスが<a>要素に追加されるため、ビュー遷移をカスタマイズできます。

a.transitioning p {
  view-transition-name: "image-title";
}
 
a.transitioning img {
  view-transition-name: "image-expand";
}
<NavLink to={to} unstable_viewTransition>
  <p>画像番号 {idx}</p>
  <img src={src} alt={`Img ${idx}`} />
</NavLink>

className/styleプロパティやchildrenに渡されるレンダリングプロパティを使用して、isTransitioning値に基づいてさらにカスタマイズすることもできます。

<NavLink to={to} unstable_viewTransition>
  {({ isTransitioning }) => (
    <>
      <p
        style={{
          viewTransitionName: isTransitioning
            ? "image-title"
            : "",
        }}
      >
        画像番号 {idx}
      </p>
      <img
        src={src}
        alt={`Img ${idx}`}
        style={{
          viewTransitionName: isTransitioning
            ? "image-expand"
            : "",
        }}
      />
    </>
  )}
</NavLink>
このAPIは不安定としてマークされており、メジャーリリースなしで破壊的な変更が発生する可能性があります。

<Link>プロパティ

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