菜单栏在移动视图中切换，不会折叠

Question

在使用引导程序导航栏时，我遇到了这个问题，并且在组件更改时，nav栏本身没有折叠。看看here

这是我的文件Menubar.jsx

的内容

import React, { Component } from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";

class Header extends Component {
  render() {
    return (
      <div>
        <header id="header">
          <nav className="navbar navbar-fixed-top" role="banner">
            <div className="container">
              <div className="navbar-header">
                <button
                  type="button"
                  className="navbar-toggle"
                  data-toggle="collapse"
                  data-target=".navbar-collapse"
                >
                  <span className="sr-only">Toggle navigation</span>
                  <span className="icon-bar" />
                  <span className="icon-bar" />
                  <span className="icon-bar" />
                </button>

                <a href="#">
                  <img
                    src="images/dew_vantures.png"
                    alt="DEW"
                    className="img-responsive"
                  />
                </a>
              </div>

              <div className="collapse navbar-collapse navbar-right">
                <ul className="nav navbar-nav">
                  <li>
                    <Link to={"/"}>Home</Link>
                  </li>
                  <li>
                    <Link to={"/About"}>About</Link>
                  </li>
                  <li>
                    <Link to={"/Contact"}>Contact Us</Link>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </header>
      </div>
    );
  }
}

export default Header;

但是当我在纯HTML5或PHP中使用这种方法时，效果很好，

Here是一个有效的示例。

我使用了以下示例，但它对我不起作用：

  

How to use data toggle collapse in Reactjs with Bootstrap?