Bootstrap导航栏崩溃无响应

Question

我已遵循有关导航栏折叠功能的引导程序教程。但是该按钮不起作用。我按时它什么也没做。我正在使用最新版本的Bootstrap 4.3.1。我也在使用React 16.9。

以下代码用于导航栏，该导航栏具有不同的链接，具体取决于用户是登录还是注销。

import React, { Fragment } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { logout } from "../../actions/auth";

const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
  const authLinks = (
    <Fragment>
      <li className="nav-item">
        <Link className="nav-link" to="/profiles">
          Terps
        </Link>
      </li>
      <li className="nav-item">
        <Link className="nav-link" to="/posts">
          Forum
        </Link>
      </li>
      <li className="nav-item">
        <Link className="nav-link" to="/dashboard">
          Dashboard
        </Link>
      </li>
      <li className="nav-item">
        <Link className="nav-link" onClick={logout} to="/">
          Logout
        </Link>
      </li>
    </Fragment>
  );
  const guestLinks = (
    <Fragment>
      <li className="nav-item">
        <Link className="nav-link" to="/profiles">
          Terps
        </Link>
      </li>
      <li className="nav-item">
        <Link className="nav-link" to="/register">
          Register
        </Link>
      </li>
      <li className="nav-item">
        <Link className="nav-link" to="/login">
          Login
        </Link>
      </li>
    </Fragment>
  );

  return (
    <nav
      className="navbar navbar-expand-sm navbar-dark"
    >
      <div className="container">
        <Link className="navbar-brand" to="/">
          <i className="fas fa-laptop m0" /> Portal
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarMain"
        >
          <span className="navbar-toggler-icon" />
        </button>

        {!loading && (
          <div className="collapse navbar-collapse" id="navbarMain">
            <ul className="navbar-nav ml-auto">
              {isAuthenticated ? authLinks : guestLinks}
            </ul>
          </div>
        )}
      </div>
    </nav>
  );
};
Navbar.propTypes = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(
  mapStateToProps,
  { logout }
)(Navbar);