# Выделение активной ссылки в 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; }`

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

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

← →
↑