Die Aandui van Aktiewe Skakels in React Router

Gestel ons het verskeie produkte by ons aansoek gevoeg en sien elkeen van die produkte na. Hoe weet ons op watter produk se bladsy ons tans is? Kom ons toon hierdie produk in die lys, byvoorbeeld met vetdruk en 'n bruin kleur, en as die skakel nog laai, dan met grys.

Om te begin, gaan na die tuisblad, voeg 4 produkte by tot die lys en voer data in vir elkeen. Gee hulle enige name.

Om die aktiewe skakel aan te dui sal die komponent NavLink help, dit is 'n subtipe van die Link-komponent wat die data se status ken. Dit word gewoonlik gebruik wanneer 'n navigasiemenu geskep word.

Kom ons maak root.jsx oop en voer NavLink in (moenie vergeet om die invoer van Link te verwyder nie, anders kan React kla, aangesien ons dit nie meer gebruik nie):

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

Vervang dan die komponent Link met NavLink in die uitleg:

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

En voeg die prop className daaraan toe, sowel as die gebruik van voorwaardelike logika. As die bladsy gelaai is, sal die skakel na 'n aktiewe status verander, as dit laai, dan na 'n laaistatus, en as niks gebeur nie, sal dit dieselfde bly. Afhangend hiervan sal die skakel se klas verander:

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

Ons moet net nog style byvoeg vir die active en loading klasse in ons css-lêer:

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

a.loading {
	color: gray;
}

Klaar! Klik nou op produkte in die lys.

Neem die aansoek wat jy geskep het in opdragte vir vorige lesse. Deur die lesse se materiaal te gebruik, implementeer daarin die aanduiding van die aktiewe skakel vir die lys studente sodat dit duidelik is watter student se data die gebruiker tans besigtig.