Isticanje aktivne veze u React Router-u

Pretpostavimo da smo dodali nekoliko proizvoda u našu aplikaciju i pregledamo svaki od proizvoda. Kako da znamo na stranici kog proizvoda se trenutno nalazimo? Hajde da istaknemo taj proizvod u listi, na primer podebljanim fontom i braon bojom, a ako se veza još učitava, onda sivom.

Za početak idite na početnu stranicu, dodajte u listu 4 proizvoda i za svaki od njih unesite podatke. Dajte im bilo koje nazive.

U isticanju aktivne veze će nam pomoći komponenta NavLink, to je podvrsta komponente Link, koja zna o stanju podataka. Obično se primenjuje prilikom kreiranja navigacionog menija.

Hajde da otvorimo root.jsx i importujemo NavLink (ne zaboravite da uklonite import Link, inače React može da se "izljuti", pošto ga više ne koristimo):

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

Zatim u šablonu zamenimo komponentu Link sa NavLink:

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

I dodaćemo mu prop className, a takođe ćemo koristiti uslovnu logiku. Ako se stranica učitala, onda će veza preći u stanje aktivne, ako se učita, onda u stanje učitavanja, ako ništa ne šta se dešava, onda će ostati nepromenjena. U zavisnosti od toga će se menjati klasa veze:

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>

Ostaje nam da dodamo stilove za active i loading klase u naš css fajl:

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

a.loading {
  color: gray;
}

Gotovo! A sada klikćite na proizvode u listi.