Mise en évidence du lien actif dans React Router

Supposons que nous ayons ajouté plusieurs produits à notre application et que nous consultions chacun des produits. Comment pouvons-nous savoir sur la page de quel produit nous nous trouvons actuellement ? Faisons ressortir ce produit dans la liste, par exemple en gras et en couleur marron, et si le lien est encore en cours de chargement, en gris.

Pour commencer, allez sur la page d'accueil, ajoutez 4 produits à la liste et pour chacun d'eux, saisissez des données. Donnez-leur n'importe quels noms.

Pour mettre en évidence le lien actif, le composant NavLink nous aidera. C'est une variante du composant Link, qui connaît l'état des données. Il est généralement utilisé lors de la création d'un menu de navigation.

Ouvrons root.jsx et importons NavLink (n'oubliez pas de supprimer l'importation de Link, sinon React pourrait râler, puisque nous ne l'utilisons plus) :

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

Ensuite, dans le layout, remplaçons le composant Link par NavLink :

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

Et ajoutons-lui la prop className, ainsi qu'une logique conditionnelle. Si la page est chargée, le lien passera à l'état actif, si elle est en cours de chargement, à l'état de chargement, et si rien ne se passe, il restera inchangé. En fonction de cela, la classe du lien changera :

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

Il ne nous reste plus qu'à ajouter des styles pour les classes active et loading dans notre fichier css :

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

a.loading {
	color: gray;
}

Terminé ! Maintenant, cliquez sur les produits dans la liste.

Prenez l'application que vous avez créée dans les travaux dirigés des leçons précédentes. En utilisant le contenu de cette leçon, implémentez-y la mise en évidence du lien actif pour la liste des étudiants, afin qu'il soit clair quelles données de l'étudiant l'utilisateur est en train de consulter.