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

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

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

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

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

import { NavLink } from 'react-router-dom';

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

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

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

<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クラスのスタイルを追加するだけです：

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

a.loading {
	color: gray;
}

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

過去のレッスンの課題で作成したアプリケーションを使用してください。このレッスンの資料を参考に、学生リストのアクティブリンクの強調表示を実装し、ユーザーが現在どの学生のデータを閲覧しているかがわかるようにしてください。