Hervorhebung des aktiven Links in React Router

Nehmen wir an, wir haben mehrere Produkte zu unserer Anwendung hinzugefügt und sehen uns jedes der Produkte an. Wie können wir verstehen, auf welcher Produktseite wir uns gerade befinden? Lassen Sie uns dieses Produkt in der Liste hervorheben, zum Beispiel mit fetter Schrift und brauner Farbe, und wenn der Link noch lädt, dann mit grauer Farbe.

Gehen Sie zunächst auf die Hauptseite, fügen Sie 4 Produkte zur Liste hinzu und tragen Sie für jedes davon Daten ein. Geben Sie ihnen beliebige Namen.

Bei der Hervorhebung des aktiven Links hilft uns die Komponente NavLink, eine Unterart der Komponente Link, die den Zustand der Daten kennt. Normalerweise wird sie bei der Erstellung eines Navigationsmenüs verwendet.

Lassen Sie uns root.jsx öffnen und NavLink importieren (vergessen Sie nicht, den Import von Link zu entfernen, sonst könnte React meckern, da wir es nicht mehr verwenden):

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

Dann ersetzen wir in der Layout-Datei die Komponente Link durch NavLink:

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

Und fügen wir die Prop className hinzu, sowie eine bedingte Logik. Wenn die Seite geladen ist, geht der Link in den aktiven Zustand über, wenn sie lädt, dann in den Ladezustand, und wenn nichts passiert, bleibt er wie er ist. Abhängig davon wird sich die Klasse des Links ändern:

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

Jetzt müssen wir nur noch Stile für die active und loading Klassen in unserer CSS-Datei hinzufügen:

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

a.loading {
	color: gray;
}

Fertig! Klicken Sie nun auf die Produkte in der Liste.

Nehmen Sie die Anwendung, die Sie in den Aufgaben zu den vorherigen Lektionen erstellt haben. Setzen Sie unter Verwendung des Lehrmaterials darin die Hervorhebung des aktiven Links für die Liste der Studenten um, sodass klar ist, welche Studentendaten der Benutzer gerade betrachtet.