Zaznaczanie aktywnego linku w React Router

Załóżmy, że dodaliśmy kilka produktów do naszej aplikacji i przeglądamy każdy z produktów. Jak mamy zrozumieć, na stronie którego produktu aktualnie się znajdujemy? Dodajmy zaznaczenie tego produktu na liście, na przykład pogrubioną czcionką i brązowym kolorem, a jeśli link jest jeszcze wczytywany, to szarym.

Na początek wejdź na stronę główną, dodaj do listy 4 produkty i dla każdego z nich wprowadź dane. Nadaj im dowolne nazwy.

W zaznaczeniu aktywnego linku pomoże nam komponent NavLink, to podtyp komponentu Link, który zna stan danych. Zwykle jest używany przy tworzeniu menu nawigacyjnego.

Otwórzmy root.jsx i zaimportujmy NavLink (nie zapomnij usunąć importu Link, bo React może się zirytować, przecież już go nie używamy):

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

Następnie w układzie zamieńmy komponent Link na NavLink:

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

I dodajmy mu właściwość className, a również użyjmy logiki warunkowej. Jeśli strona została wczytana, to link przejdzie w stan aktywny, jeśli jest wczytywana, to w stan ładowania, jeśli zaś nic się nie dzieje, to pozostanie niezmieniony. W zależności od tego będzie zmieniać się klasa linku:

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

Pozostaje nam dodać style dla klas active i loading do naszego pliku css:

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

a.loading {
	color: gray;
}

Gotowe! A teraz poklikaj na produkty na liście.

Weź aplikację stworzoną przez ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, zaimplementuj w niej zaznaczenie aktywnego linku dla listy studentów tak, aby było wiadomo dane którego studenta użytkownik aktualnie przegląda.