Remixドキュメント日本語版

English

<NavLink>

<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;
}

プロパティ

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 プロパティは、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

viewTransition

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

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 プロパティまたは children に渡されるレンダープロパティを使用して、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> の他のすべてプロパティがサポートされています。