React: не скрывается выпадающее меню при выборе страницы

Question

Начал осваивать React. Переписал свой простенький сайт под реакт. Но не могу решить одну проблему: меню открывается при клике на кнопку, но не сворачивается при выборе страницы (страница открывается под меню). В консоль могу вывести реакцию при клике на ссылку, но не могу написать правильную функцию.

Ниже кусок кода, где есть сама кнопка меню, которая открывает и закрывает меню. Я так понимаю атрибут aria-expanded="false" отвечает за это. В низу есть линк "Про адвоката" который реагирует на событие. У меня не получается написать функцию, которая запишет новое значение в state, скорее всего из за дефиса в названии "aria-expanded". Помогите пожалуйста. Код добавляю ниже.

<button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
          id="nkef"
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse" id="navbarSupportedContent" >
          <ul className="navbar-nav mr-auto w-100 nav-justified">
            <li className="nav-item">
              <Link 
                to="/body" 
                className="solop-link-menu p-4">
                  Головна
              </Link>
            </li>
            <li className="nav-item">
              <Link 
                to="/about" 
                className="solop-link-menu p-4"
                onClick={this.onToggleMenu}>
                  Про адвоката
              </Link>

Answer 1

Вы правильно начали добавив onClick обработчик в Link. Вот работающий вариант:

import React, { useState } from "react";
import { Link, BrowserRouter, Switch, Route } from "react-router-dom";

const Routing = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const toggleMenu = () => setIsMenuOpen((isOpen) => !isOpen);

  return (
    <BrowserRouter>
      Routing
      <button onClick={toggleMenu}>Toggle Menu</button>
      {isMenuOpen && (
        <div>
          <Link to="/body" onClick={toggleMenu}>
            Головна
          </Link>
          <Link to="/about" onClick={toggleMenu}>
            Про адвоката
          </Link>
        </div>
      )}
      <Switch>
        <Route exact={true} path="/body">
          Body
        </Route>
        <Route exact={true} path="/about">
          About
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

export default Routing;

БЛОГ НА HUSL

React: не скрывается выпадающее меню при выборе страницы

Ответы (1 шт):