Чтобы отобразить активный класс в React Router v6, вы можете использовать один из следующих методов:

1. NavLink с опорой end: компонент NavLinkиз react-router-domавтоматически добавляет activeкласс к активной ссылке. Если указать свойство end, активный класс будет применен только к ссылке, которая точно соответствует текущему URL-адресу.

   import { NavLink } from 'react-router-dom';
   function Navigation() {
    return (
      <nav>
        <NavLink to="/" end activeClassName="active">
          Home
        </NavLink>
        <NavLink to="/about" end activeClassName="active">
          About
        </NavLink>
        <NavLink to="/contact" end activeClassName="active">
          Contact
        </NavLink>
      </nav>
    );
   }

2. Использование перехватчика useMatch. Перехватчик useMatchпозволяет вам проверить, соответствует ли текущий URL-адрес определенному шаблону. Вы можете условно применить активный класс в зависимости от результата.

   import { useMatch } from 'react-router-dom';
   function Navigation() {
    const homeMatch = useMatch('/');
    const aboutMatch = useMatch('/about');
    const contactMatch = useMatch('/contact');
    return (
      <nav>
        <a className={homeMatch ? 'active' : ''} href="/">
          Home
        </a>
        <a className={aboutMatch ? 'active' : ''} href="/about">
          About
        </a>
        <a className={contactMatch ? 'active' : ''} href="/contact">
          Contact
        </a>
      </nav>
    );
   }

3. Использование пользовательского перехватчика. Вы можете создать собственный перехватчик, который инкапсулирует логику определения активного класса на основе текущего URL-адреса.

   import { useLocation } from 'react-router-dom';
   function useActiveClass(path) {
    const location = useLocation();
    const isActive = location.pathname === path;
    return isActive ? 'active' : '';
   }
   function Navigation() {
    return (
      <nav>
        <a className={useActiveClass('/')} href="/">
          Home
        </a>
        <a className={useActiveClass('/about')} href="/about">
          About
        </a>
        <a className={useActiveClass('/contact')} href="/contact">
          Contact
        </a>
      </nav>
    );
   }

Это некоторые методы, которые вы можете использовать для отображения активного класса в React Router v6. Не забудьте импортировать необходимые зависимости (NavLink, useMatch, useLocation) из пакета react-router-dom.