React中Bootstrap 5.2的Navbar Toggler无法正常工作求助

你的代码存在几个关键错误，导致toggler按钮无法正常工作，修复方案如下：

• 替换Bootstrap 5专属属性：Bootstrap 5已废弃旧版的data-toggle/data-target属性，需改用data-bs-toggle/data-bs-target，这是功能失效的核心原因。
• 匹配控件关联ID：按钮的aria-controls属性值必须与折叠容器的id完全一致，你的代码中按钮写的是navbarNavAltMarkup，但容器ID为navbarNav，二者不匹配导致关联失效。
• 确保Bootstrap JS已加载：折叠功能依赖Bootstrap的JavaScript逻辑，若通过npm安装Bootstrap，需在项目入口文件（如index.js）中导入：

  import 'bootstrap/dist/js/bootstrap.bundle.min.js';
  

  若使用CDN，可在public/index.html中添加：

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  

修正后的Navbar代码：

import React, { Component } from "react";
import { NavLink, Link } from "react-router-dom";
class Navbar extends Component {
  state = {};
  render() {
    return (
      <nav className="navbar navbar-dark mb-2 navbar-expand-lg bg-dark">
        <div className="container">
          <Link className="navbar-brand" to="#">
            Vidly
          </Link>
          <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" />
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav ms-auto">
              <li className="nav-item">
                <NavLink className="nav-link" aria-current="page" to="/movies">
                  Movies
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" to="/rentals">
                  Rentals
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" to="/customers">
                  Customers
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" to="/login">
                  Login
                </NavLink>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    );
  }
}

export default Navbar;

内容的提问来源于stack exchange，提问作者mhemanthkmr