Fremheving av aktiv lenke i React Router

La oss anta at vi har lagt til flere produkter i applikasjonen vår og ser på hvert av produktene. Hvordan kan vi forstå hvilken produktside vi for øyeblikket er på? La oss fremheve dette produktet i listen, for eksempel med fet skrift og brun farge, og hvis lenken fortsatt lastes, med grå farge.

For å begynne, gå til hovedsiden, legg til 4 produkter i listen og legg inn data for hver av dem. Gi dem vilkårlige navn.

For å fremheve den aktive lenken vil komponenten NavLink hjelpe oss, dette er en variant av komponenten Link, som kjenner til datatilstanden. Den brukes vanligvis når man oppretter en navigasjonsmeny.

La oss åpne root.jsx og importere NavLink (husk å fjerne importen av Link, ellers kan React klage, siden vi ikke bruker den lenger):

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

Deretter, i layouten, bytter vi ut komponenten Link med NavLink:

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

Og legger til prop-en className, samt bruker betinget logikk. Hvis siden er lastet, vil lenken gå over til aktiv tilstand, hvis den lastes, til lastetilstand, og hvis ingenting skjer, forblir den som den er. Avhengig av dette vil lenkeklassen endres:

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

Det gjenstår for oss å legge til stiler for active- og loading- klassene i vår css-fil:

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

a.loading {
	color: gray;
}

Ferdig! Klikk nå på produktene i listen.

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Bruk materialet fra leksjonen til å implementere fremheving av aktiv lenke for listen over studenter, slik at det er forståelig hvilken students data brukeren for øyeblikket ser på.