Открояване на активна връзка в 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;
}

Готово! А сега кликнете върху продуктите в списъка.

Вземете приложението, създадено от вас в задачите към предишните уроци. Използвайки материалите от урока, реализирайте в него открояване на активна връзка за списъка със студенти, така че да е ясно данните на кой студент потребителят в момента разглежда.