为什么放在Bootstrap 5下拉导航栏中的react-router Link无法正常工作？

问题原因 #

• Bootstrap的折叠导航交互依赖其自带的JS逻辑，你仅引入了Bootstrap样式、错误引入了jQuery（Bootstrap 5已经不依赖jQuery，引入jQuery对实现交互没有任何帮助），没有加载Bootstrap对应的交互JS文件，所以点击折叠按钮没有反应。
• 你嵌套使用<a>标签和<Link>组件属于错误写法，两个都是跳转交互元素，嵌套会导致事件冲突，影响路由跳转逻辑。

解决步骤 #

1. 修正导航链接的错误写法

直接把Bootstrap的样式类加在<Link>组件上，无需额外嵌套<a>标签，同时可以给品牌栏也加上跳转逻辑。

2. 引入Bootstrap交互逻辑

有两种可选方案，优先推荐方案二，更符合React开发规范：

方案一：引入Bootstrap全量JS

如果是通过npm安装的Bootstrap，直接在项目入口文件index.js顶部引入Bootstrap的打包JS即可：

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

这个文件已经内置了popper依赖，无需额外安装其他包。如果是通过CDN引入Bootstrap，直接在public/index.html的</body>标签前添加Bootstrap 5的JS CDN即可。

方案二：使用React状态控制菜单显隐（无额外依赖）

自己通过React状态管理折叠菜单的显示隐藏，完全不用依赖Bootstrap的原生JS，避免全局JS冲突：

import React, { useState } from "react";
import {Link} from "react-router-dom";

const Navbar = () => {
    // 控制导航菜单是否展开
    const [isNavOpen, setIsNavOpen] = useState(false);
    return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
  <div className="container-fluid">
    <Link className="navbar-brand" to="/">Crea tu equipo de superhéroes</Link>
    <button 
      className="navbar-toggler" 
      type="button" 
      onClick={() => setIsNavOpen(!isNavOpen)}
      aria-controls="navbarNav" 
      aria-expanded={isNavOpen} 
      aria-label="Toggle navigation"
    >
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className={`collapse navbar-collapse ${isNavOpen ? 'show' : ''}`} id="navbarNav">
      <ul className="navbar-nav">
        <li className="nav-item">
          <Link className="nav-link active" aria-current="page" to="/">Favoritos</Link>
        </li>
        <li className="nav-item">
          <Link className="nav-link" to="/Search">Búsqueda</Link>
        </li>
      </ul>
    </div>
  </div>
</nav>
    )
}

export default Navbar;

额外提示 #

你之前引入jQuery的代码可以直接删除，Bootstrap 5已经完全移除了对jQuery的依赖，多余引入反而可能带来未知的事件冲突。

内容的提问来源于stack exchange，提问作者Amadeo de la Peña