При переходе в навигации меню, надо на активную ссылку добавлять класс menu__item-active
. При загрузке сайта на любую страницу через useEffect получается подвесить на активную ссылку класс, а вот при переходе на другую страницу не получается обновить useState. Подскажите в чем моя ошибка.
Menu.jsx
export default function Menu({ onClick }) {
return (
<nav className="menu" onClick={onClick}>
<NavLink className="menu__item" to="/">Главная</NavLink>
<NavLink className="menu__item" to="/drift">Дрифт-такси</NavLink>
<NavLink className="menu__item" to="/timeattack">Time Attack</NavLink>
<NavLink className="menu__item" to="/forza">Forza Karting</NavLink>
</nav>
)
}
App.jsx
export default function App() {
const [activePage, setActivePage] = useState([]);
useEffect(() => {
const active = document.getElementsByClassName("active");
active[0].classList.add("menu__item-active");
setActivePage([
active[0],
])
}, []);
const handlerOnClick = (e) => {
const { target } = e;
target.classList.add("menu__item-active");
return setActivePage([
target,
])
}
return (
<div>
<Menu onClick={handlerOnClick} />
<div className="page">
<Routes>
<Route
path="/"
element={<HomePage />}
/>
<Route
path="/drift"
element={<DriftPage />}
/>
<Route
path="/timeattack"
element={<TimeAttackPage />}
/>
<Route
path="/forza"
element={<ForzaPage />}
/>
</Routes>
</div>
</div>
);