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

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

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

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

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>

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

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

a.loading {
  color: gray;
}

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