Как установить активный класс в React-Router? ⇐ CSS

[Anonymous]

У меня есть навигация, созданная с помощью React-Router

nav.tsx

импортировать React из 'реагировать' импортировать {меню} из './menu' импортировать {ссылку} из 'реагировать-маршрутизатор-дом' импортировать стили из «./HamburgerMenu.module.scss» const HamburgerMenu: React.FC = () => { const [active, setActive] = React.useState(0) console.log(активный) возвращаться (

• {menu.map((пункт, индекс) => ( setActive(индекс)} ключ = {item.title} className={styles[active === индекс? 'активный' : '']} >
• {item.title} ))}

) } экспортировать HamburgerMenu по умолчанию menu.ts:

экспортировать константное меню: IMenuItem[] = [ { связь: '/', титул: 'главная' }, { ссылка: '/профиль', заголовок: 'профиль' }, { ссылка: '/дисциплина', название: 'наказания' }, { ссылка: '/магазин', заголовок: 'магазин' }, { ссылка: '/статистика', заголовок: 'статистика' } ] main.tsx:

импортировать React из 'реагировать' импортировать ReactDOM из «реагировать-дом/клиент» импортировать { RouterProvider, createBrowserRouter } из 'реагировать-маршрутизатор-дом' импортировать домашнюю страницу из './pages/Home/Home' импортировать './assets/style/global.scss' импортировать NotFoundPage из './pages/NotFoundPage' импортировать профиль из «./pages/Profile/Profile» const router = createBrowserRouter([ { элемент: , путь: '/' }, { элемент: , путь: '/профиль' }, { элемент: , путь: '*' } ]) ReactDOM.createRoot(document.getElementById('root')!).render( ) style.scss

.menu { дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: пространство между; разрыв: 10; поле справа: 100 пикселей; li.nav-link-item { поле: 0 пикселей 50 пикселей; а { цвет: белый; непрозрачность: 0,7; переход: непрозрачность 0,3 с, легкость; размер шрифта: 20 пикселей; &:наведите { непрозрачность: 1; } } } li.nav-link-item:has(a.active) { радиус границы: 10 пикселей; граница: сплошная 5 пикселей #542c44; отступы: 7 пикселей 42 пикселей; } } Layout.tsx — в него превращается страница

импортировать React из 'реагировать' импортировать { ILayoutProps } из './Laout.type' импортировать заголовок из «../Заголовок/Заголовок» импортировать нижний колонтитул из '../Footer/Footer' импортировать стили из «./Layout.module.scss» const Layout: React.FC = ({ Children }) => { возвращаться ( {дети} ) } экспортировать макет по умолчанию При переключении между '/' и '/profile' класс "active" постоянно сбрасывается и переключается на 0, если я хочу, чтобы класс "active" был добавлен в '/profile', тогда мне нужно щелкнуть по нему 2 раза, и если я переключусь между '/discipline ', '/store', '/statistics', классы назначаются обычным образом. Я понимаю, что такое поведение, скорее всего, связано с тем, что '/discipline', '/store', '/statistics' не являются объявленные страницы, а как насчет '/' и '/profile'? Почему это может произойти и как это исправить?