React Bootstrap可折叠导航栏不起作用

Question

我在让我的 React 应用在移动设备上运行时遇到了问题，尤其是引导导航栏。汉堡菜单显示，但点击它导航项目不显示。到目前为止，这是我所拥有的：

相关代码

app.js

<nav className="navbar navbar-expand-lg navbar-light bg-white">
        <div className="container-fluid">
          <a className="navbar-brand" href="/">
            RPA
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item">
                <NavLink
                  className="nav-link"
                  exact
                  to="/"
                  activeClassName="active"
                >
                  example
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink
                  to="/about"
                  className="nav-link"
                  activeClassName="active"
                >
                  example
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink
                  to="/subreddit_list"
                  className="nav-link"
                  activeClassName="active"
                >
                  example
                </NavLink>
              </li>
              <li className="nav-item">
                <a
                  className="nav-link"
                  href=""
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  example
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

预期与实际结果

理想情况下，导航栏可以在移动设备上打开和关闭，但目前它只是灰色并在点击时突出显示，而不是展开。

我尝试了什么

1. 关注此线程 related to my question 并添加这些脚本似乎不会影响我的代码。
2. 导入jquery，没有效果
3. 考虑了不同的职业，没有效果

如果有人能指出我正确的方向，我将不胜感激。不幸的是，我现在无法自己解决这个问题。谢谢。

Answer 1

我建议你在 ReactJS 项目中使用 react-bootstrap。

这是一个Codesandbox，用于使导航栏具有响应性和折叠性，并带有汉堡图标。

请检查 js 文件的依赖和导入。