Bootstrap下拉菜单没有下拉的问题

Question

所以我正在尝试开发一个带有导航栏和下拉菜单的web应用程序。到目前为止，导航栏工作得很好，所有功能都如预期一样工作，但我现在试图添加的下拉菜单并没有下降。我看过Bootstrap网站上的文档，但即使直接从他们的网站复制工作代码也不能解决问题。

以下是导航栏的代码部分：

enter code here
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img src="../Images/Brand2.png" alt="brand" width="120px" height="30px"></img></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li> <Link to={'/InputMission'} className="nav-link active">Input Mission</Link></li>
<li> <Link to={'/missions'} className="nav-link">Missions</Link></li>
<li><Link to={'/adminActions'} className="nav-link">Admin</Link></li>
<li><Link to={'/testBranch'} className="nav-link">Admin Functions</Link></li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div className="dropdown-menu" aria-labelledby="navbarDropdown">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
</div>
</li>
{//               <li class="nav-item dropdown"><Link to={'/adminActions'} class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" className="nav-link">Admin</Link></li>
//              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
//                  <a class="dropdown-item" href="#">Add</a>
//                  <a class="dropdown-item" href="#">Edit</a>
//                  <a class="dropdown-item" href="#">Delete</a>
//                  </div>
}
</ul>
</div>
</nav>

Answer 1

在脚本标记中添加popper.js文件，它就可以工作了。

下拉列表建立在第三方库Popper.js上，该库提供动态定位和视口检测。请确保在Bootstrap的JavaScript之前包含popper.min.js，或者使用包含popper.js的Bootstrap.bundle.min.js/Bootstrap.bundle.js。popper.js不用于定位导航栏中的下拉菜单，因为不需要动态定位

添加此

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>

Answer 2

Update，结果发现我的.HTML页面上没有安装正确的JS脚本。它现在起作用了。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>