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):

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

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

routes/root.jsx<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:

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>

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

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

a.loading {
  color: gray;
}

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