Označevanje aktivne povezave v React Router

Predpostavimo, da smo dodali več produktov v našo aplikacijo in pregledujemo vsakega od produktov. Kako lahko razumemo, na strani katerega produkta se trenutno nahajamo? Označimo ta produkt na seznamu, na primer s krepko pisavo in rjavo barvo, če pa se povezava še nalaga, pa s sivo.

Za začetek pojdite na domačo stran, dodajte na seznam 4 produkte in za vsakega od njih vnesite podatke. Dajte jim poljubna imena.

Pri označevanju aktivne povezave nam bo pomagal komponent NavLink, to je podvrsta komponenta Link, ki pozna stanje podatkov. Običajno se uporablja pri ustvarjanju navigacijskega menija.

Odprimo root.jsx in uvozimo NavLink (ne pozabite odstraniti uvoza Link, sicer se lahko React jezi, saj ga ne uporabljamo več):

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

Nato v postavitvi zamenjajmo komponent Link z NavLink:

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

In dodajmo mu prop className, ter uporabimo pogojno logiko. Če se stran naložila, bo povezava prešla v stanje aktivna, če se nalaga, pa v stanje nalaganja, če pa se nič ne dogaja, bo ostala enaka. Odvisno od tega se bo spreminjal razred povezave:

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

Ostalo nam je le še dodati sloge za active in loading razrede v naš css-datoteko:

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

a.loading {
	color: gray;
}

Končano! Zdaj pa klikajte na produkte na seznamu.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva iz lekcije implementirajte v njej označevanje aktivne povezave za seznam študentov tako, da bo jasno, podatke katerega študenta uporabnik trenutno pregleduje.