在React Router中使用NavLink时，如何在单击时关闭Bootstrap菜单？

问题描述

我使用React Router在我的React应用程序中有一个Bootstrap 4导航栏，因此我拥有<a>元素而不是<NavLink>元素。

下面的代码很好用，除了当一个处于移动视图并打开菜单时，单击其中一个菜单项会切换页面，但不会关闭菜单。

如何在单击时关闭移动视图菜单？​​

我找到了一些答案，其中涉及在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>
  );
}