Az aktív link kiemelése a React Routerben

Tegyük fel, hogy hozzáadtunk néhány terméket alkalmazásunkhoz, és mindegyik terméket megnézzük. Hogyan érthetjük meg, hogy éppen melyik termék oldalán vagyunk? Emeljük ki ezt a terméket a listában, például vastag betűtípussal és barna színnel, ha pedig a link még betöltődik, akkor szürke színnel.

Kezdetben menjen a főoldalra, adjon hozzá 4 terméket a listához, és mindegyikhez adja meg az adatokat. Adjon nekik tetszőleges neveket.

Az aktív link kiemelésében a NavLink komponens segít nekünk, ez a Link komponens egyik fajtája, amely ismeri az adatok állapotát. Általában navigációs menü létrehozásakor használják.

Nyissuk meg a root.jsx fájlt és importáljuk a NavLink komponenst (ne felejtsük el eltávolítani a Link importját, mert a React megsértődhet, hiszen már nem használjuk):

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

Ezután a layoutban cseréljük le a Link komponenst NavLink-re:

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

És adjunk hozzá egy className prop-ot, valamint használjunk feltételes logikát. Ha az oldal betöltődött, akkor a link aktív állapotba kerül, ha éppen betöltődik, akkor betöltési állapotba, ha pedig semmi sem történik, akkor változatlan marad. Ennek függvényében változik a link osztálya:

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

Már csak a stílusok hozzáadása van hátra az active és loading osztályokhoz a css-fájlunkban:

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

a.loading {
	color: gray;
}

Kész! Most kattintgasson a termékeken a listában.

Vegye azt az alkalmazást, amit az előző leckék feladataihoz készített. A lecke anyagait felhasználva valósítsa meg benne az aktív link kiemelését a diákok listájához úgy, hogy egyértelmű legyen a felhasználó számára, melyik diák adatait nézi éppen.