React中Bootstrap导航切换按钮失效问题求助

你的问题核心是直接使用原生Bootstrap的data属性无法和React虚拟DOM兼容，React-Bootstrap虽基于Bootstrap样式，但原生Bootstrap的JS依赖DOM操作，而React通过虚拟DOM管理元素，导致点击事件无法触发折叠逻辑。下面提供两种解决方案：

方案1：导入Bootstrap JavaScript文件（快速修复） #

如果坚持用原生Bootstrap类名写法，需在项目入口文件（如index.js）导入Bootstrap的JS包，初始化折叠功能：

// index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js'; // 必须导入，包含Popper.js

同时删除Link标签中多余的href="#"属性（React Router的Link无需原生href）。

方案2：改用React-Bootstrap组件（推荐，符合React生态） #

React-Bootstrap封装了专门的Navbar组件，内部通过React状态管理折叠逻辑，完全适配虚拟DOM，无需手动处理data属性。

步骤1：确保依赖安装 #

npm install react-bootstrap bootstrap

步骤2：重构代码（替换原有Header和MainNavigation） #

// Header.js
import { Navbar, Container, Nav, Form, FormControl } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Logo from "../logo";

const Header = () => {
    return (
        <header id="header-container">
            <Navbar expand="lg" variant="dark" className="navbar-dark">
                <Container fluid>
                    <Logo />
                    {/* React-Bootstrap自带的折叠按钮 */}
                    <Navbar.Toggle 
                        aria-controls="navbarSupportedContent" 
                        className="bg-primary" 
                    />
                    {/* 折叠容器 */}
                    <Navbar.Collapse id="navbarSupportedContent">
                        <Nav className="navbar-nav px-3">
                            <Link 
                                to="/" 
                                className="nav-link active text-primary text-uppercase fw-semibold" 
                                aria-current="page"
                            >
                                Home
                            </Link>
                            <Link 
                                to="products" 
                                className="nav-link text-primary text-uppercase fw-semibold"
                            >
                                Products
                            </Link>
                            <Link 
                                to="services" 
                                className="nav-link text-primary text-uppercase fw-semibold"
                            >
                                Services
                            </Link>
                            <Link 
                                to="contact" 
                                className="nav-link text-primary text-uppercase fw-semibold"
                            >
                                Contact
                            </Link>
                        </Nav>
                        <Form className="d-flex nav-item py-3" role="search">
                            <FormControl
                                type="search"
                                placeholder="Search for..."
                                className="me-2 rounded-pill bg-primary-light"
                                style={{padding: "0.1rem 1rem", maxWidth: 420}}
                                aria-label="Search"
                            />
                        </Form>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </header>
    );
}

export default Header;

关键调整说明 #

• 用Navbar.Toggle和Navbar.Collapse组件替代原生按钮和折叠容器，内部自动处理状态切换
• 移除原生data-bs-toggle、data-bs-target等属性，由React-Bootstrap组件内部管理
• 保留原有样式类和自定义样式，确保视觉效果一致

额外注意点 #

• 检查bg-primary-light是否为自定义样式类，Bootstrap原生无此类，需确保对应CSS已定义
• 确保入口文件已导入Bootstrap CSS：import 'bootstrap/dist/css/bootstrap.min.css';

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