Aktiivisen linkin korostaminen React Routerissa

Oletetaan, että olemme lisänneet useita tuotteita sovellukseemme ja tarkastelemme kutakin tuotetta. Miten voimme selvittää minkä tuotteen sivulla parhaillaan olemme? Korostetaan tuote listassa, esimerkiksi lihavoidulla fontilla ja ruskealla värillä, ja jos linkki vielä latautuu, harmaalla.

Aluksi siirry kotisivulle, lisää listaan 4 tuotetta ja anna kullekin niistä tiedot. Anna niille mitä tahansa nimiä.

Aktiivisen linkin korostamisessa auttaa komponentti NavLink, se on eräänlainen komponentin Link alalaji, joka tietää datan tilasta. Yleensä sitä käytetään navigointivalikon luomisen yhteydessä.

Avataan root.jsx ja tuodaan NavLink (älä unohda poistaa tuonti Link, muuten React saattaa varoittaa, sillä emme enää käytä sitä):

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

Sitten korvataan komponentti Link komponentilla NavLink laidossa:

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

Ja lisätään sille prop className, sekä käytetään ehdollista logiikkaa. Jos sivu on ladannut, linkki siirtyy aktiiviseen tilaan, jos latautuu, niin lataustilaan, jos mitään ei tapahdu, se pysyy entisellään. Riippuen tästä linkin luokka muuttuu:

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

Meidän on vielä lisättävä tyylejä active ja loading luokille css-tiedostoomme:

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

a.loading {
	color: gray;
}

Valmista! Nyt voit klikkailla tuotteita listassa.

Ota edellisten oppituntien tehtävissä luomasi sovellus. Hyödyntäen oppitunnin materiaaleja, toteuta siihen aktiivisen linkin korostaminen opiskelijoiden listalle siten, että on selvää minkä opiskelijan tietoja käyttäjä parhaillaan tarkastelee.