Zvýraznění aktivního odkazu v React Router

Předpokládejme, že jsme přidali několik produktů do naší aplikace a prohlížíme si každý z produktů. Jak poznáme, na stránce kterého produktu se právě nacházíme? Pojďme zvýraznit tento produkt v seznamu, například tučným písmem a hnědou barvou, a pokud se odkaz ještě načítá, tak šedou.

Pro začátek přejděte na hlavní stránku, přidejte do seznamu 4 produkty a pro každý z nich vyplňte data. Dejte jim libovolné názvy.

Při zvýrazňování aktivního odkazu nám pomůže komponenta NavLink, což je poddruh komponenty Link, který zná stav dat. Obvykle se používá při vytváření navigačního menu.

Pojďme otevřít root.jsx a importovat NavLink (nezapomeňte odstranit import Link, protože React by se mohl zlobit, jelikož ho již nepoužíváme):

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

Poté v šabloně nahradíme komponentu Link za NavLink:

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

A přidáme mu prop className, a také použijeme podmíněnou logiku. Pokud se stránka načetla, odkaz přejde do aktivního stavu, pokud se načítá, tak do stavu načítání, pokud se nic neděje, zůstane beze změny. V závislosti na tom se bude měnit třída odkazu:

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

Zbývá nám přidat styly pro active a loading třídy do našeho css souboru:

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

a.loading {
	color: gray;
}

Hotovo! A teď klikněte na produkty v seznamu.

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. S využitím materiálů lekce v ní implementujte zvýraznění aktivního odkazu pro seznam studentů tak, aby bylo jasné, data kterého studenta uživatel právě prohlíží.