未捕获错误:您不应该在<Router>外部使用<Link>来引用导航栏

我目前正在整理一个简单的反应应用程序与引导导航栏。不幸的是,我得到了上述错误,并试图找出是什么原因造成了这个问题。我看了其他有这个错误的帖子,似乎不明白为什么会这样。

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;

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'));