Remix ドキュメント 日本語版

English

<NavLink>

アクティブおよび保留中の状態をスタイルするための追加の props を持つ <Link> をラップします。

import { NavLink } from "@remix-run/react";
 
<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</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;
}

Props

className コールバック

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

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

style コールバック

適用されるスタイルをカスタマイズできるように、アクティブおよび保留中の状態をコールバックします。

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

children コールバック

<NavLink> のコンテンツをカスタマイズできるように、アクティブおよび保留中の状態をコールバックします。

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

end

end prop は、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 prop を無視し、ルートルートにいる場合にのみ一致します。

caseSensitive

caseSensitive prop を追加すると、マッチングロジックが変更され、大文字と小文字が区別されるようになります。

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

viewTransition

viewTransition prop は、最終的な状態の更新を document.startViewTransition() でラップすることにより、このナビゲーションの View Transition を有効にします。デフォルトでは、トランジション中に、<a> 要素 に transitioning クラス が追加され、これを使用してビューのトランジションをカスタマイズできます。

a.transitioning p {
  view-transition-name: "image-title";
}
 
a.transitioning img {
  view-transition-name: "image-expand";
}
<NavLink to={to} viewTransition>
  <p>Image Number {idx}</p>
  <img src={src} alt={`Img ${idx}`} />
</NavLink>

className/style props または children に渡されるレンダー props を使用して、isTransitioning 値に基づいてさらにカスタマイズすることもできます。

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

<Link> の他のすべての props がサポートされています。