Html 移动视图中的菜单栏切换，不折叠

我在使用引导导航栏时遇到了这个问题，

nav

bar在组件更改时不会自动折叠。看一看

这是我的文件

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;

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Link}；
类头扩展组件{
render（）{
返回(
切换导航


家


关于


联系我们


);
}
}
导出默认标题；

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

这是一个有效的例子

我使用了以下示例，但不适用于我：