Fremhævelse af aktivt link i React Router

Antag, at vi har tilføjet flere produkter til vores applikation og ser på hvert af produkterne. Hvordan kan vi forstå på hvilken produktside vi befinder os i øjeblikket? Lad os fremhæve dette produkt på listen, for eksempel med fed skrift og brun farve, og hvis linket stadig indlæses, så med grå farve.

Til at starte med, gå til forsiden, tilføj 4 produkter til listen og indtast data for hver af dem. Giv dem vilkårlige navne.

Ved fremhævning af aktive links vil komponenten NavLink hjælpe os, det er en underart af komponenten Link, som kender til dataens tilstand. Den bruges normalt ved oprettelse af en navigationsmenu.

Lad os åbne root.jsx og importere NavLink (husk at fjerne importen af Link, ellers kan React brokke sig, da vi ikke længere bruger den):

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

Derefter erstatter vi komponenten Link med NavLink i layoutet:

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

Og tilføj prop'en className til den, samt brug betinget logik. Hvis siden er indlæst, vil linket gå over i aktiv tilstand, hvis den indlæses, så i indlæsningstilstand, og hvis intet sker, forbliver den uændret. Afhængigt heraf vil linkets klasse ændre sig:

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

Tilbage står det at tilføje styling for active og loading klasserne til vores css-fil:

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

a.loading {
	color: gray;
}

Klar! Prøv nu at klikke på produkterne på listen.

Tag applikationen, som du oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen til at implementere fremhævning af aktive links for listen over studerende, så det er tydeligt hvilken studerendes data brugeren i øjeblikket ser på.