Компонент NavLink

Компонент NavLink является специализированным инструментом для навигации в приложениях на React, построенных с использованием React Router. Он расширяет возможности стандартного компонента Link, позволяя автоматически присваивать активный стиль элементу навигации в зависимости от текущего маршрута. Это делает NavLink незаменимым при создании динамических меню и подсветки активных ссылок.

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

  • to — путь, на который будет указывать ссылка. Может быть строкой ("/about") или объектом { pathname, search, hash, state }.
  • end — булевое значение, определяющее точное совпадение маршрута. Если true, ссылка будет считаться активной только при полном совпадении пути.
  • className — позволяет задать класс для ссылки. Может быть строкой или функцией, которая получает объект { isActive, isPending } и возвращает строку с классами.
  • style — аналогично className, но для inline-стилей. Может быть объектом или функцией ( { isActive, isPending } ) => styleObject.
  • children — может быть функцией, получающей { isActive, isPending } и возвращающей JSX, что позволяет создавать полностью кастомизированные элементы навигации.

Пример базового использования:

import { NavLink } from 'react-router-dom';

 isActive ? 'active-link' : undefined}>
  О нас

В этом примере ссылка будет автоматически получать класс active-link, когда текущий маршрут совпадает с /about.

Активное состояние и точное совпадение

NavLink предоставляет мощный механизм управления активным состоянием. Основные моменты:

  • Точное совпадение (end) По умолчанию NavLink считает ссылку активной, если текущий маршрут начинается с пути в to. Для ограничения до точного совпадения используется свойство end.

  Главная

Без end путь / будет активен также для /about, /contact и других маршрутов, начинающихся с /.

  • Функция для className и style Возможность передавать функцию позволяет динамически менять внешний вид ссылки в зависимости от её состояния:
 isActive ? 'profile-active' : 'profile-inactive'}
  style={({ isPending }) => ({ opacity: isPending ? 0.5 : 1 })}
>
  Профиль

Здесь одновременно контролируется класс и стиль в зависимости от состояния навигации.

Использование с вложенными маршрутами

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

Панель
Настройки
  • С end первый NavLink активен только на /dashboard.
  • Второй NavLink активен на /dashboard/settings и подсвечивается отдельно, что облегчает визуальное восприятие структуры приложения.

Динамические ссылки

NavLink может использовать динамические параметры маршрута, что особенно полезно для построения меню на основе данных:

const users = [
  { id: 1, name: 'Алексей' },
  { id: 2, name: 'Мария' }
];

users.map(user => (
   isActive ? 'user-active' : ''}
  >
    {user.name}
  
))

С помощью этого подхода каждая ссылка автоматически получает активное состояние при переходе на конкретного пользователя.

Навигация с состоянием и поиском

NavLink поддерживает объектную форму to, что позволяет передавать дополнительные данные через state, а также использовать параметры поиска и хэши:


  Книги

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

Советы по стилизации

  • CSS-модули или Tailwind CSS хорошо работают с динамическими классами через className.
  • Для сложных анимаций и переходов удобно использовать style с функцией, чтобы управлять прозрачностью, цветами или transform на основе isActive.
  • В случаях с большим количеством ссылок рекомендуется создавать обертку над NavLink, чтобы стандартизировать активные стили по всему приложению.
  • NavLink не вызывает перезагрузку страницы при переходе, так как использует внутренний механизм React Router.
  • Свойство isPending позволяет реагировать на асинхронные переходы, например, при ленивой загрузке компонентов через React.lazy.
  • NavLink корректно работает в сочетании с useLocation и useNavigate, что облегчает управление состоянием маршрутов и переходами программно.
  • Использование ul и li обеспечивает семантическую правильность.
  • Свойство end на главной странице предотвращает ложную активацию всех ссылок, начинающихся с /.
  • Классы active или кастомные обеспечивают визуальную подсветку текущего раздела.
Оглавление