React Router 6 — это мощная библиотека маршрутизации для создания одностраничных приложений на React. Одним из распространенных требований в веб-разработке является выделение активной навигационной ссылки путем применения определенного класса CSS, например «isActive», к соответствующему элементу. В этой статье мы рассмотрим различные методы, позволяющие гарантировать, что класс isActive остается истинным для корневого элемента в React Router 6. Мы предоставим примеры кода для демонстрации каждого метода.

Метод 1. Использование хука «useLocation».
Хук «useLocation» из React Router 6 возвращает текущее местоположение URL-адреса. Мы можем использовать этот крючок, чтобы определить активный маршрут и условно применить класс isActive к корневому элементу. Вот пример:

import { useLocation } from 'react-router-dom';
function App() {
  const location = useLocation();
  return (
    <nav>
      <Link to="/" className={location.pathname === '/' ? 'isActive' : ''}>
        Home
      </Link>
      {/* Add more navigation links */}
    </nav>
  );
}

Метод 2: Использование хука «useMatch»:
Хук «useMatch» позволяет нам проверить, соответствует ли данный маршрут текущему местоположению. Используя этот хук, мы можем применить класс «isActive» к корневому элементу на основе результата сопоставления. Вот пример:

import { useMatch } from 'react-router-dom';
function App() {
  const isRootMatch = useMatch('/');
  return (
    <nav>
      <Link to="/" className={isRootMatch ? 'isActive' : ''}>
        Home
      </Link>
      {/* Add more navigation links */}
    </nav>
  );
}

Метод 3: настройка компонента «NavLink».
React Router 6 предоставляет компонент «NavLink», который добавляет дополнительную функциональность к стандартному компоненту «Link». Мы можем настроить компонент NavLink, включив в него класс isActive для корневого элемента. Вот пример:

import { NavLink } from 'react-router-dom';
function App() {
  return (
    <nav>
      <NavLink
        to="/"
        activeClassName="isActive"
        isActive={(match, location) => match && location.pathname === '/'}
      >
        Home
      </NavLink>
      {/* Add more navigation links */}
    </nav>
  );
}

Поддержание класса «isActive» как «true» для корневого элемента в React Router 6 имеет решающее значение для выделения активной навигационной ссылки. В этой статье мы рассмотрели три эффективных метода на примерах кода: использование перехватчика «useLocation», использование перехватчика «useMatch» и настройка компонента «NavLink». В зависимости от ваших конкретных требований и предпочтений вы можете выбрать метод, который лучше всего подходит для вашего проекта. Применяя эти методы, вы можете улучшить взаимодействие с пользователем и улучшить навигацию в приложении React Router 6.