Означавање активне везе у React Router-у

Претпоставимо да смо додали неколико производа у нашу апликацију и прегледамо сваки од производа. Како да знамо на страници кога производа се тренутно налазимо? Хајде да истакнемо тај производ на листи, на пример подебљаним словима и браон бојом, а ако веза још увек учитава, онда сивом.

За почетак идите на почетну страницу, додајте на листу 4 производа и за сваки од њих унесите податке. Дајте им било која имена.

У означавању активне везе помоћи ће нам компонента NavLink, то је подврста компоненте Link, која зна о стању података. Обично се користи при креирању навигационог менија.

Хајде да отворимо root.jsx и увеземо NavLink (не заборавите да уклоните импорт Link, иначе React би могао да се пожали, јер га више не користимо):

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

Затим у макети заменимо компоненту Link са NavLink:

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

И додајмо му пропс className, а такође користимо условну логику. Ако страница је учитана, онда ће веза прећи у стање активне, ако се учитава, онда у стање учитавања, ако ништа не дешава, онда ће остати иста. У зависности од тога ће се мењати класа везе:

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

Остало нам је да додамо стилове за active и loading класе у наш css-фајл:

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

a.loading {
	color: gray;
}

Готово! А сада кликните на производе на листи.

Узмите апликацију коју сте креирали у задацима за претходне лекције. Користећи материјале лекције, имплементирајте у њој означавање активне везе за листу студењата тако да буде јасно податке ког студента корисник тренутно прегледа.