0

При переходе в навигации меню, надо на активную ссылку добавлять класс 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>
  );
1

3 ответа 3

0

<NavLink> — это особый тип <Link> , который знает, является ли он «активным». Это полезно при создании навигационного меню, такого как навигационная цепочка или набор вкладок, где вы хотите показать, какая из них выбрана в данный момент. Он также предоставляет полезный контекст для вспомогательных технологий, таких как программы чтения с экрана.

По умолчанию active класс добавляется к компоненту <NavLink> , когда он активен. Это обеспечивает такой же простой механизм стилей для большинства пользователей, которые обновляются с v5. Одно отличие от v6.0.0-beta.3 заключается в том, что из NavLinkProps удалены activeClassName и activeStyle. Вместо этого вы можете передать функцию либо style , либо className , что позволит вам настроить встроенный стиль или строку класса на основе активного состояния компонента. Вы также можете передать функцию как дочернюю, чтобы настроить содержимое <NavLink>. компонент в зависимости от их активного состояния, особенно полезно для изменения стилей внутренних элементов.

Пример

import * as React from "react";
import { NavLink } from "react-router-dom";

function NavList() {
  // Этот стиль будет применен к <NavLink>, когда
  // маршрут, на который он ссылается, в данный момент выбран.
  let activeStyle = {
    textDecoration: "underline",
  };

  let activeClassName = "underline";

  return (
    <nav>
      <ul>
        <li>
          <NavLink
            to="messages"
            style={({ isActive }) =>
              isActive ? activeStyle : undefined
            }
          >
            Messages
          </NavLink>
        </li>
        <li>
          <NavLink
            to="tasks"
            className={({ isActive }) =>
              isActive ? activeClassName : undefined
            }
          >
            Tasks
          </NavLink>
        </li>
        <li>
          <NavLink to="tasks">
            {({ isActive }) => (
              <span
                className={
                  isActive ? activeClassName : undefined
                }
              >
                Tasks
              </span>
            )}
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}
5
  • Мне не нужно через js настравивать класс active. По классу "active" я определяю активную ссылку/страницу и на него добавляю свой стилизованный класс "menu__item-active" при начальной работе с сайтом через useEffect. А вот дальше не могу сообразить как сделать. Как на следующий элемент перевесить свой класс. Я попытался активный элемент положить в useState, а при переходе по ссылке заменить его в useState, но не получается.
    – npukojiucm
    Commented 26 сент. 2023 в 12:52
  • @npukojiucm, суть моего ответа - не делай так, используй возможности Реакта. Суть Реакта - работать его возможностями, а не изобретать свои велосипеды.
    – ksa
    Commented 26 сент. 2023 в 13:59
  • @npukojiucm, для разработки своего велосипеда можешь использовать хук useLocation. Там можно увидеть ключ pathname - анализируй его и выполняй соответствующие действия. Но я настоятельно рекомендую пользоваться возможностями самого компонента NavLink, ибо там уже все есть для работы.
    – ksa
    Commented 26 сент. 2023 в 14:05
  • я не пытаюсь делать велосипед. Это дз с курса. Есть готовые css стили, в которых есть как класс active, так и menu__item-active. Вот мне и нужно на активную ссылку повесить дополнительный класс.
    – npukojiucm
    Commented 26 сент. 2023 в 14:56
  • @npukojiucm, я показал как в примере вешать класс на активную ссылку...
    – ksa
    Commented 26 сент. 2023 в 15:52
0

Для возможности менять стили меню в зависимости от раздела, где находимся, можно использовать хук useLocation()

И устанавливать нужный класс, если требуемая проверка пройдена

import { useLocation } from 'react-router-dom';

export function Menu() {
  const location = useLocation();
  return (
      <nav className="menu">
          <NavLink className={`menu__item ${location.pathname === '/' ? 'active' : ''}`} to="/">Главная</NavLink>
          <NavLink className={`menu__item ${location.pathname === '/drift' ? 'active' : ''}`} to="/drift">Дрифт-такси</NavLink>
          <NavLink className={`menu__item ${location.pathname === '/timeattack' ? 'active' : ''}`} to="/timeattack">Time Attack</NavLink>
          <NavLink className={`menu__item ${location.pathname === '/forza' ? 'active' : ''}`} to="/forza">Forza Karting</NavLink>
      </nav>
  )
}

После этого, надо удалить лишнее из компонента App:

export default function App() {
  return (
    <div>
        <Menu />
        <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>
  )
}
1
  • Спасибо, буду пробовать
    – npukojiucm
    Commented 26 сент. 2023 в 14:56
0

Всем спасибо за ответы. Предложенные варианты наверно хороши, но все таки на каждую ссылку вешать проверку для добавления класса, думаю это не в концепции react. Решил по своему, может кому пригодиться.

Сделал второй useEffect, который подвязал на state-массив с не большой проверкой длины массива, чтобы в самом начале при загрузке сайта не выкидывал ошибку. По клику на ссылке меню обновляю элемент в state, в свою очередь второй useEffect все делает далее самостоятельно.

App.jsx

import Menu from "./components/Menu.jsx";
import {Route, Routes } from "react-router-dom";
import HomePage from "./components/HomePage.jsx";
import DriftPage from "./components/DriftPage.jsx";
import TimeAttackPage from "./components/TimeAttackPage.jsx";
import ForzaPage from "./components/ForzaPage.jsx";
import {useEffect, useState} from "react";

export default function App() {
    const [activePage, setActivePage] = useState([]);

    useEffect(() => {
        const active = document.getElementsByClassName("active");

        setActivePage([
            active[0],
        ])
    }, []);

    useEffect(() => {
        if (activePage.length > 0) {
            activePage[0].classList.add("menu__item-active");
        }

    }, [activePage]);

    const handlerOnClick = (e) => {
        const { target } = e;

        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>
  );
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.