React Bootstrap可折叠导航栏移动端点击汉堡菜单无法展开问题

API 探路者

2026-10-4

问题排查&解决方案

检查Bootstrap JS依赖是否正确引入
你用的data-bs-*是Bootstrap 5的专属属性，交互逻辑依赖Bootstrap自带的JS包，仅引入CSS无法触发展开动作。如果是npm安装的Bootstrap，在项目入口文件（一般是index.js）添加引入代码：

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

如果是用CDN引入，需要在HTML的body末尾添加Bootstrap JS的CDN链接，注意要选带popper的bundle版本，不需要额外引入jQuery，Bootstrap 5已经不再依赖jQuery，你之前引入jQuery没有效果是正常情况。

替换为React适配的Bootstrap组件库
原生Bootstrap的JS逻辑是直接操作真实DOM，和React的虚拟DOM渲染逻辑存在冲突，容易出现状态不同步的问题，更推荐使用专门适配React的react-bootstrap库。安装后直接调用封装好的Navbar组件即可，无需手动编写data-bs-*相关属性，自带汉堡菜单的展开收起交互，示例用法如下：

import { Navbar, Nav, Container } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';

function AppNav() {
  return (
    <Navbar bg="white" expand="lg" className="navbar-light">
      <Container fluid>
        <Navbar.Brand href="/">RPA</Navbar.Brand>
        <Navbar.Toggle aria-controls="navbarNav" />
        <Navbar.Collapse id="navbarNav">
          <Nav className="me-auto">
            <Nav.Link as={NavLink} exact to="/" activeClassName="active">example</Nav.Link>
            <Nav.Link as={NavLink} to="/about" activeClassName="active">example</Nav.Link>
            <Nav.Link as={NavLink} to="/subreddit_list" activeClassName="active">example</Nav.Link>
            <Nav.Link href="" target="_blank" rel="noopener noreferrer">example</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}