Evidenziare il Link Attivo in React Router

Supponiamo di aver aggiunto diversi prodotti alla nostra applicazione e di visualizzare ciascuno dei prodotti. Come facciamo a capire su quale pagina di prodotto ci troviamo attualmente? Iniziamo a evidenziare questo prodotto nell'elenco, ad esempio in grassetto e con il colore marrone, mentre se il link è ancora in caricamento, in grigio.

Per iniziare, vai alla pagina principale, aggiungi 4 prodotti all'elenco e per ognuno di essi inserisci i dati. Assegna loro nomi qualsiasi.

Ad aiutarci nell'evidenziare il link attivo ci sarà il componente NavLink, una variante del componente Link, che è a conoscenza dello stato dei dati. Di solito viene utilizzato quando si crea un menu di navigazione.

Apriamo root.jsx e importiamo NavLink (ricordati di rimuovere l'import di Link, altrimenti React potrebbe lamentarsi, dato che non lo usiamo più):

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

Poi, nel layout, sostituiamo il componente Link con NavLink:

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

E aggiungiamo la prop className, utilizzando anche una logica condizionale. Se la pagina è stata caricata, il link passerà a uno stato attivo; se è in caricamento, a uno stato di caricamento; se invece non sta accadendo nulla, rimarrà invariato. In base a ciò, cambierà la classe del link:

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

Non ci resta che aggiungere gli stili per le classi active e loading nel nostro file css:

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

a.loading {
	color: gray;
}

Fatto! Ora clicca sui prodotti nell'elenco.

Prendi l'applicazione che hai creato nei compiti delle lezioni precedenti. Utilizzando il materiale della lezione, implementa l'evidenziazione del link attivo per l'elenco degli studenti, in modo che sia chiaro quale studente l'utente sta attualmente visualizzando.