React Routerでのアクティブリンクのスタイリング

私たちのアプリケーションにいくつかの製品を追加し、 各製品のページを閲覧していると仮定しましょう。 現在どの製品のページにいるかをどのように理解すればよいでしょうか？ 例えば、太字と茶色でリスト内のその製品を強調表示し、 リンクがまだロード中の場合は灰色にしましょう。

まず、ホームページに移動し、リストに4つの製品を追加して、 それぞれにデータを入力してください。 任意の名前を付けてください。

アクティブリンクの強調表示には、コンポーネントNavLinkが役立ちます。 これは、データの状態を認識するコンポーネントLinkのサブタイプです。 通常、ナビゲーションメニューを作成する際に使用されます。

では、root.jsxを開き、NavLinkをインポートしましょう （Linkのインポートを削除することを忘れないでください。さもないとReactがエラーを出すかもしれません。もう使用しないのですから）：

routes/root.jsximport { NavLink } from 'react-router-dom';

次に、レイアウト内でコンポーネントLinkをNavLinkに置き換えます：

routes/root.jsx<NavLink key={product.id} to={`products/${product.id}`}>
  {product.name ? product.name : <i>unnamed</i>}
</NavLink>

そして、propsclassNameを追加し、条件付きロジックも使用します。 ページがロードされた場合、リンクはアクティブ状態に移行し、 ロード中の場合はロード中状態に、何も起こらない場合はそのままの状態になります。 これに応じて、リンクのクラスが変更されます：

routes/root.jsx<NavLink
  key={product.id}
  to={`products/${product.id}`}
  className={({ isActive, isPending }) =>
    isActive ? 'active' : isPending ? 'loading' : ''
  }
>
  {product.name ? product.name : <i>Unnamed</i>}
</NavLink>

あとは、cssファイルにactiveクラスとloadingクラスのスタイルを追加するだけです：

index.cssa.active {
  font-weight: bold;
  color: brown;
}

a.loading {
  color: gray;
}

完了です！では、リストの製品をクリックしてみてください。