Означување на активната врска во 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;
}

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

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