Aktiivse lingi esiletõstmine React Routeris

Oletame, et oleme lisandunud mitu toodet meie rakendusse ja vaatame iga toodet eraldi. Kuidas me saame aru, millise toote lehel me praegu oleme? Teeme selle toote loendis esile tõstmise, näiteks paksus kirjas ja pruuni värviga, ning kui link veel laadib, siis halli värviga.

Alustuseks minge avalehele, lisage loendisse 4 toodet ja sisestage iga toote kohta andmed. Andke neile suvalised nimed.

Aktiivse lingi esiletõstmisel aitab meid komponent NavLink, see on komponendi Link alamliik, mis teab andmete olekust. Tavaliselt kasutatakse seda navigatsioonimenüü loomisel.

Avame root.jsx ja impordime NavLink (ärge unustage eemaldada importi Link, muidu võib React pahandada, sest me ei kasuta seda enam):

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

Seejärel asendame maketis komponendi Link komponendiga NavLink:

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

Ja lisame sellele propsi className, ning kasutame tingimuslikku loogikat. Kui leht on laadinud, muutub link aktiivseks olekuks, kui laadib, siis laadimise olekus, kui midagi ei toimu, jääb see endiseks. Sõltuvalt sellest muutub lingi klass:

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

Jääb üle lisada stiilid active ja loading klassidele meie css-faili:

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

a.loading {
	color: gray;
}

Valmis! Nüüd klõpsake toodete peal loendis.

Võtke rakendus, mille lõite varemate õppetundide ülesannetes. Kasutades õppetunni materjale, rakendage selles aktiivse lingi esiletõstmise tudengite loendile nii, et oleks arusaadav mille tudengi andmeid kasutaja praegu vaatab.