在ReactJS的子菜单链接上单击时，Bootstrap子菜单不会随更改页面隐藏

Question

我正在从事React项目并学习React。我已经将bootstrap navbar与react路由器一起使用了。单击bootstrap burgerburger菜单，它显示子菜单，单击子菜单链接时，它会更改关于我们，服务的页面。但不隐藏子菜单。它总是显示。这是我的网站，请尝试使用移动视图：http://adtechsoft.com。我还录制了有关我的问题和the link is here:

的视频

Navbar.js：

import React, { Component } from 'react'
import { BrowserRouter as Router, Switch, Route, NavLink, Link } from 'react-router-dom';
// nav links
import Home from '../../Home'
import About from '../About/About'
import Webdev from '../Services/Webdev'
import Facebookad from '../Services/Facebookad'
import Domainhosting from '../Services/Domainhosting'
import Bulksms from '../Services/Bulksms'
import Works from '../Works/Works'
import Blog from '../Blog/Blog'
import Article from '../Blog/Article'
import Contact from '../Contact/Contact'
import PrivacyPolicy from '../Privacy/PrivacyPolicy'
import NotFound from '../404/404'
// import images
import logo from '../../assets/logo.png'

class Navbar extends Component {
  render() {
    const activeStyle = {
      color: 'green'
    }
    return (
      <Router>
        <div>
          <nav className="navbar navbar-expand-sm navbar-light bg-light fixed-top">
            <NavLink to={'/'} className="navbar-brand ml-5"><img className="logo" src={logo} alt="AD TECH SOFT Logo" /></NavLink>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span className="navbar-toggler-icon"></span>
            </button>

            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav mx-auto">
                <li className="nav-item">
                  <Link to={'/'} className="nav-link">Home <span className="sr-only">(current)</span></Link>
                </li>
                <li className="nav-item">
                  <NavLink activeStyle={activeStyle} to={'/about'} className="nav-link">About Us</NavLink>
                </li>
                <li className="nav-item dropdown">
                  <NavLink activeStyle={activeStyle} to={'#'} className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Our Services
              </NavLink>
                  <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                    <NavLink activeStyle={activeStyle} to={'/webdev'} className="dropdown-item">Web Development</NavLink>
                    <NavLink activeStyle={activeStyle} to={'/domainhosting'} className="dropdown-item">Domain & Hosting</NavLink>
                    <NavLink activeStyle={activeStyle} to={'/facebookad'} className="dropdown-item">Facebook Advertising</NavLink>
                    <NavLink activeStyle={activeStyle} to={'/bulksms'} className="dropdown-item">SMS Marketing</NavLink>
                  </div>
                </li>
                <li className="nav-item">
                  <NavLink activeStyle={activeStyle} to={'/works'} className="nav-link">Portfolio</NavLink>
                </li>
                <li className="nav-item">
                  <NavLink activeStyle={activeStyle} to={'/blog'} className="nav-link">Blog</NavLink>
                </li>
                <li className="nav-item">
                  <NavLink activeStyle={activeStyle} to={'/contact'} className="nav-link">Contact Us</NavLink>
                </li>
              </ul>
            </div>
          </nav>

          <Switch>
            <Route exact path='/index.html' component={Home} />
            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/webdev' component={Webdev} />
            <Route path='/facebookad' component={Facebookad} />
            <Route path='/domainhosting' component={Domainhosting} />
            <Route path='/bulksms' component={Bulksms} />
            <Route path='/works' component={Works} />
            <Route
              exact
              path={process.env.PUBLIC_URL + "/blog"}
              component={Blog}
            />
            <Route
              exact
              path={process.env.PUBLIC_URL + "/blog/:id"}
              component={Article}
            />
            <Route path='/contact' component={Contact} />
            <Route path="/privacy" component={PrivacyPolicy} />
            <Route path="" component={NotFound} />
          </Switch>
        </div>
      </Router>
    )
  }
}
export default Navbar;