React(create-react-app)中Bootstrap 4导航栏折叠失效求助

Hey there, let's break down why your navbar collapse feature isn't functioning and how to fix it!

The Main Issue: Missing Bootstrap JavaScript Dependencies #

Bootstrap 4's interactive components (like the collapsible navbar, dropdowns, etc.) rely on three key files to work properly:

• jQuery
• Popper.js
• Bootstrap's own JavaScript file

Looking at your code, you've only imported jQuery and Bootstrap's CSS—you're missing both Popper.js and Bootstrap's JS. Without these, the toggle button can't trigger the collapse/expand behavior.

Quick Fix: Import All Required Dependencies #

First, make sure you have all the necessary packages installed (run this in your project directory if you haven't already):

npm install jquery popper.js bootstrap

Then, update your entry file (usually index.js) to import the files in the correct order (jQuery first, then Popper.js, then Bootstrap JS):

import React from "react";
import ReactDOM from "react-dom";
import registerServiceWorker from "./registerServiceWorker";

// Import dependencies in this exact order
import 'jquery/dist/jquery.min.js';
import 'popper.js/dist/umd/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js';

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Your navbar code here...
ReactDOM.render(
  <nav className="navbar navbar-expand-lg navbar-light bg-light">
    {/* ... rest of your navbar code ... */}
  </nav>,
  document.getElementById("root")
);
registerServiceWorker();

A Better Long-Term Solution: Use React-Bootstrap #

While the above fix will get the native Bootstrap navbar working, mixing Bootstrap's vanilla JS (which manipulates the DOM directly) with React's virtual DOM can lead to unexpected behavior down the line.

A more React-friendly approach is to use react-bootstrap—a library that wraps Bootstrap components into React components, using React's state management instead of jQuery. Here's how to set it up:

1. Install react-bootstrap and Bootstrap:

npm install react-bootstrap bootstrap

2. Replace your navbar with the react-bootstrap version:

import React from "react";
import ReactDOM from "react-dom";
import registerServiceWorker from "./registerServiceWorker";
import 'bootstrap/dist/css/bootstrap.min.css';

// Import react-bootstrap components
import { Navbar, Nav, NavDropdown, Form, Button } from 'react-bootstrap';

ReactDOM.render(
  <Navbar bg="light" expand="lg">
    <Navbar.Brand href="#">Navbar</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href="#" active>Home <span className="sr-only">(current)</span></Nav.Link>
        <Nav.Link href="#">Link</Nav.Link>
        <NavDropdown title="Dropdown" id="navbarDropdown">
          <NavDropdown.Item href="#">Action</NavDropdown.Item>
          <NavDropdown.Item href="#">Another action</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#">Something else here</NavDropdown.Item>
        </NavDropdown>
        <Nav.Link href="#" disabled>Disabled</Nav.Link>
      </Nav>
      <Form inline>
        <Form.Control type="search" placeholder="Search" className="mr-sm-2" aria-label="Search" />
        <Button variant="outline-success" type="submit">Search</Button>
      </Form>
    </Navbar.Collapse>
  </Navbar>,
  document.getElementById("root")
);
registerServiceWorker();

This approach eliminates the need for jQuery and Popper.js, and all interactions are handled through React's state system—so you won't run into conflicts between Bootstrap's DOM manipulation and React's virtual DOM.

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