Выделение активной ссылки в 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;
}
Готово! А теперь покликайте на продукты в списке.
Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, реализуйте в нем выделение активной ссылки для списка студентов так, чтобы было понятно данные какого студента юзер сейчас просматривает.