Что такое Link и NavLink в React Router?react-29

Link и NavLink — это специальные компоненты React Router для навигации между страницами в SPA (Single Page Application) без полной перезагрузки страницы.

1. Компонент Link

Основной компонент для создания навигационных ссылок.

Основные свойства:

<Link
  to="/about"
  state={{ fromHome: true }}  // Передача состояния
  replace={false}            // Заменить или добавить в историю
>
  О компании
</Link>

Особенности:

  • Не вызывает перезагрузку страницы
  • Изменяет URL и обновляет view
  • Поддерживает:
    • Абсолютные пути (/about)
    • Относительные пути (about)
    • Объекты location (to={{ pathname: '/about' }})
    • Передачу состояния (state)

2. Компонент NavLink

Специальная версия Link с дополнительными возможностями для навигационных меню.

Основные свойства:

<NavLink
  to="/about"
  className={({ isActive }) => isActive ? 'active' : ''}
  style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}
  end  // Точное совпадение пути
>
  О компании
</NavLink>

Ключевые отличия от Link:

  1. Подсветка активного состояния:

    • Автоматически добавляет класс active при совпадении пути
    • Можно кастомизировать через className или style

  2. Функция isActive:

    // Пример с функциональным className
<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Сообщения
</NavLink>

  3. Свойство end:

    • При end ссылка считается активной только при точном совпадении
    • Без end - при частичном совпадении (вложенные пути)

Сравнительная таблица

Функция Link NavLink
Навигация без перезагрузки ✅ ✅
Поддержка state ✅ ✅
Автоматическая подсветка ❌ ✅
Кастомизация активного состояния ❌ ✅
Точное совпадение пути (end) ❌ ✅

Практические примеры

Навигационное меню с NavLink:

function Navigation() {
  return (
    <nav>
      <NavLink to="/" end>Главная</NavLink>
      <NavLink to="/products">Товары</NavLink>
      <NavLink to="/about">О нас</NavLink>
    </nav>
  );
}

Стилизация активной ссылки:

<NavLink
  to="/contact"
  style={({ isActive }) => ({
    fontWeight: isActive ? 'bold' : 'normal',
    color: isActive ? '#1890ff' : '#333',
  })}
>
  Контакты
</NavLink>

Хлебные крошки с Link:

function Breadcrumbs() {
  return (
    <div className="breadcrumbs">
      <Link to="/">Главная</Link>
      <span> / </span>
      <Link to="/products">Товары</Link>
      <span> / </span>
      <Link to="/products/123">Товар 123</Link>
    </div>
  );
}

Резюмируем

  1. Link — базовая навигация:

    • Простая замена <a> для SPA
    • Минимальные возможности стилизации

  2. NavLink — "умная" ссылка:

    • Автоматическая обработка активного состояния
    • Гибкая настройка стилей для активных/неактивных состояний
    • Поддержка точного совпадения (end)

  3. Выбор компонента:

    • Навигационное меню → NavLink
    • Обычные ссылки в контенте → Link
    • Хлебные крошки, кнопки → Link

  4. Общие возможности:

    • Поддержка относительных/абсолютных путей
    • Передача состояния (state)
    • Программное управление поведением

Для большинства навигационных задач в React-приложениях этих компонентов достаточно.

Вопросы

Собеседования