在 React Router 中使用 NavLink 时如何让 Bootstrap 菜单在点击时关闭？答案

【问题标题】：How to get Bootstrap menu to close upon click when using NavLinks in React Router?在 React Router 中使用 NavLink 时如何让 Bootstrap 菜单在点击时关闭？
【发布时间】：2020-12-09 04:32:17
【问题描述】：

我的 React 应用程序中使用 React Router 有一个 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>

【问题讨论】：

你最后解决了吗？我面临同样的问题。提前谢谢你

标签： reactjs bootstrap-4 react-router navbar

【解决方案1】：

我想我遇到了同样的问题。对我来说，我通过使用 onClick 事件添加/删除按钮（汉堡包）和下拉菜单的相应类来解决它。

功能：

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

NavBar（内容减少）：

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

【讨论】：