Zvýraznenie aktívneho odkazu v React Router

Predpokladajme, že sme pridali niekoľko produktov do našej aplikácie a prezeráme si každý z produktov. Ako môžeme zistiť, na stránke ktorého produktu sa práve nachádzame? Poďme zvýrazniť tento produkt v zozname, napríklad tučným písmom a hnedou farbou, a ak sa odkaz ešte načítava, tak sivou.

Na začiatok prejdite na domovskú stránku, pridajte do zoznamu 4 produkty a pre každý z nich zadajte údaje. Dajte im ľubovoľné názvy.

Pri zvýrazňovaní aktívneho odkazu nám pomôže komponent NavLink, čo je podtyp komponentu Link, ktorý pozná stav údajov. Zvyčajne sa používa pri vytváraní navigačného menu.

Poďme otvoriť root.jsx a importovať NavLink (nezabudnite odstrániť import Link, lebo React by mohol protestovať, veď ho už viac nepoužívame):

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

Potom v makete nahradíme komponent Link za NavLink:

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

A pridáme mu prop className, a tiež použijeme podmienenú logiku. Ak sa stránka načítala, odkaz prejde do aktívneho stavu, ak sa načítava, tak do stavu načítavania, ak sa nič nedeje, zostane nezmenený. V závislosti od toho sa bude meniť trieda odkazu:

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

Zostáva nám pridať štýly pre active a loading triedy do nášho css súboru:

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

a.loading {
	color: gray;
}

Hotovo! A teraz klikajte na produkty v zozname.

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Použitím materiálov z lekcie implementujte v nej zvýraznenie aktívneho odkazu pre zoznam študentov tak, aby bolo jasné, údaje ktorého študenta používateľ práve prezerá.