如何在我的 React 导航栏中实现汉堡包下拉菜单

我在 React 项目中使用 bootstrap 实现一个简单的汉堡包下拉菜单时遇到了问题，以使我的标头响应。

我在 index.html 中导入 Bootstrap 的原始 css。

  <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">

我在引导程序文档中尝试了折叠导航栏解决方案，因为这似乎是最简单的，但似乎不起作用。

我究竟做错了什么？导入原始 CSS 是否有效，那么我应该使用 react-bootstrap 模块还是其他东西？

class Header extends Component {
  renderLinks() {
    if (this.props.authenticated) {
      // show link to signout
      console.log('here is the email: ', this.props.email);
      return (
        [
          <li className="nav-item" key={3}>
            <Link className="nav-link" to="/signout">Sign Out</Link>
          </li>,
          <li className="nav-item" key={4}>
              <p className="nav-link">Signed in as {this.props.email}</p>
          </li>
        ]
      );
    } else {
      // show link to sign in or sign out
    return ([
          <li className="nav-item" key={1}>
            <Link className="nav-link" to="/signin">Sign In</Link>
          </li>,
          <li className="nav-item" key={2}>
            <Link className="nav-link" to="/signup">Sign Up</Link>
          </li>
        ]
      );
    }
  }

  render() {
    return (
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <Link to="/" className="navbar-brand"> Brand <br/><small>w/ react-router-dom</small></Link>

        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
           <span className="navbar-toggler-icon"></span>
        </button>
        <div className="navbar-collapse collapse" id="navbarNav">
          <ul className="navbar-nav">
            {this.renderLinks()}
          </ul>
        </ div>
      </nav>
    );
  }
}
// end of class