Вылучэнне актыўнай спасылкі ў 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;
}

Гатова! А цяпер паклікайце на прадукты ў спісе.

Вазьміце прыкладанне, створанае вамі ў заданнях да мінулых урокаў. Карыстаючыся матэрыяламі ўрока, рэалізуйце ў ім вылучэнне актыўнай спасылкі для спісу студэнтаў так, каб было зразумела дадзеныя якога студэнта юзер зараз праглядае.