未捕获的错误：您不应在<router>外使用<link />来引用导航栏

Question

我目前正在将一个简单的React应用与一个Bootstrap Navbar组合在一起。不幸的是，我遇到了以上错误，并试图找出导致此问题的原因。我看过其他出现此错误的帖子，似乎无法弄清楚为什么会发生这种情况。

import React,{ Component } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';


class Navbar extends Component {
 render() {
    return (

        <nav className="navbar navbar-expand-md navbar-dark bg-dark mb-4">
            <button className="navbar-toggler navbar-toggler-right" 
     type="button" data-toggle="collapse" data-target="#navbarCollapse" aria- 
   controls="navbarCollapse" aria-expanded="false" aria-label="Toggle 
 navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="container">

            <div className="collapse navbar-collapse" id="navbarCollapse">
                <ul className="navbar-nav ml-auto">
                <li className="nav-item active">
                    <Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/">Link</Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/about">About</Link>
                </li>
                </ul>
              </div>
            </div>
        </nav>


     );
   }
}

export default Navbar;

这是在我的index.js文件中。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import HeaderName from './components/header';
import FooterName from './components/footer';
import DescripTitle from './components/descrip';
import DescripName from './components/intro';

//create a new componet.  Produce some HTML.
// const App = function() {
//return <div>Welcome to Aquastars Website</div>;
// }

 const App = () => {
 return (
    <div>
        <Router>
            <div>
            {/* <Route exact path="/" component={HeaderName}/> */}
            </div>
        </Router>
        <HeaderName />
        <DescripName />
        <DescripTitle />
        <FooterName />
    </div>
   );
 }
//Take this component's generated HTML and put it
// on the page(in the DOM).
ReactDOM.render(<App />, document.getElementById('root'));

任何帮助将不胜感激。