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

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

Zatim u šablonu zamenimo komponentu Link sa NavLink:

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

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

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

a.loading {
	color: gray;
}

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

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći materijale lekcije, implementirajte u njoj isticanje aktivne veze za listu studenata tako da bude jasno podatke kog studenta korisnik trenutno pregleda.