Выделение активной ссылки в React Router

Предположим, мы добавили несколько продуктов в наше приложение и просматриваем каждый из продуктов. Как же нам понять на страничке какого продукта мы сейчас находимся? Давайте будем выделять этот продукт в списке, например жирным шрифтом и коричневым цветом, а если ссылка еще подгружается, то серым.

Для начала зайдите на главную страницу, добавьте в список 4 продукта и для каждого из них внесите данные. Дайте им любые названия.

В выделении активной ссылки нам поможет компонент NavLink, это подвид компонента Link, который знает о состоянии данных. Обычно он применяется при создании навигационного меню.

Давайте откроем root.jsx и импортируем NavLink (не забудьте убрать импорт Link, а то React может заругаться, ведь мы его больше не используем):

routes/root.jsximport { NavLink } from 'react-router-dom';

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

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

И добавим ему пропс className, а также используем условную логику. Если страничка подгрузилась, то ссылка перейдет в состояние активной, если прогружается, то в состояние загрузки, если же ничего не происходит, то останется прежней. В зависимости от этого будет меняться класс ссылки:

routes/root.jsx<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-файл:

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

a.loading {
  color: gray;
}

Готово! А теперь покликайте на продукты в списке.