Блог

У меня есть панель навигации Bootstrap 4 в моем приложении React с использованием React Router, и поэтому вместо <a> элементов у меня есть <NavLink> elements.

Следующий код работает хорошо, за исключением случаев, когда пользователь находится в режиме мобильного просмотра и меню открыто, при нажатии на один из пунктов меню страница переключается, меню не закрывается.

Как я могу заставить меню мобильного просмотра закрываться по щелчку?

Я нашел несколько ответов, которые включают добавление a data-toggle="collapse" к <a> элементам, но это не работает с <NavLink> элементами.

         <nav className="navbar navbar-expand-lg navbar-light fixed-top bg-light">
                <a className="navbar-brand" href="#"><NavLink className="nav-link" exact to="/"><span className="appTitle">Onespace</span></NavLink></a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/languages">Languages</NavLink>
                        </li>
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/news">News</NavLink>
                        </li>
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/runs">Runs</NavLink>
                        </li>
                    </ul>
                </div>
            </nav>
  

Я думаю, что у меня была такая же проблема. Что касается меня, я решил это с помощью обходного пути, используя событие onClick для добавления / удаления соответствующих классов для кнопки (гамбургер) и выпадающего меню.

Функция:

   handleCollapse = () => {
    console.log("handleCollapse");
    var nav = document.getElementById("navbarNav");
    var btn = document.getElementById("navbarBtn");
    nav.classList.remove("show");
    btn.classList.add("collapsed");
  };
  

Панель навигации (с уменьшенным содержимым):

 render() {
  return (
    <nav className="navbar navbar-expand-md navbar-light fixed-top">
      <Link className="navbar-brand" to="/index">
        <img src="/x.png" className="d-inline-block align-top" loading="lazy"></img>
        PPlan
      </Link>
      <button
        className="navbar-toggler" id="navbarBtn" type="button" 
        data-target="#navbarNav" data-toggle="collapse" 
        aria-controls="navbarNav" aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span className="navbar-toggler-icon"></span>
      </button>

      <div className="collapse navbar-collapse" id="navbarNav">
        <div className="navbar-nav mr-auto">
          <NavLink to={/1} className="nav-item nav-link" onClick={this.handleCollapse}>
            User
          </NavLink>
          <NavLink to="/2" className="nav-item nav-link" onClick={this.handleCollapse}>
            PrjPlan
          </NavLink>
        </div>
      </div>
    </nav>
  );
}