React Page Refresh the Whole Page after Clicking on a link - reactjs

Question

I've just started using reactJS and i am integrating an HTML admin template in react which has header, sidebar, footer and the main section content.
One thing i'm a bit curious is whenever i click links in the main section content, only the specific section dynamically loads, but when i click on links in sidebar the entire page reloads, why is it so? Below is the code that i'm following
App.js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Header from './Components/Header';
import Content from './Components/Content';
import Footer from './Components/Footer';
import Sidebar from './Components/Sidebar';
const App = () => {
return(
<BrowserRouter>
<Header/>
<Sidebar/>
<Content/>
<Footer/>
</BrowserRouter>
);
}
export default App;
Header.jsx
import React from 'react';
import logo from '../stack.png';
const Header = () => {
return(
<nav>
</nav>
);
}
export default Header;
Sidebar.jsx
import React from 'react';
import { Link } from 'react-router-dom';
const Sidebar = () => {
return(
<aside>
<div className="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
<div className="main-menu-content">
<ul className="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
<li style={{'margin': '25px 0 0 0'}} className="active nav-item">
<Link to="/dashboard">
<i className="ft-home"></i>
<span className="menu-title">
Dashboard
</span>
</Link>
</li>
<li className="nav-item"></i><span className="menu-title" data-i18n="">Create</span>
<ul className="menu-content">
<li className=" menu-item">
<Link to="/create">
<span className="menu-title">
Create New
</span>
</Link>
</li>
<li className=" menu-item">
<Link to="/createxyz">
<span className="menu-title">
Create XYZ
</span>
</Link>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>
);
}
export default Sidebar;
Content.jsx
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Enter from './Enter';
import Enterxyz from './Enterxyz';
const Content = () => {
return(
<Switch>
<Route exact path="/" component={Dashboard} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/create" component={Enter} />
<Route path="/createxyz" component={Enterxyz} />
</Switch>
);
}
export default Content;
Footer.jsx
import React from 'react';
function Footer()
{
return(
<footer className="footer footer-static footer-light navbar-border">
<p className="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
<span className="float-md-left d-block d-md-inline-block">© 2020
<a className="text-bold-800 grey darken-2" href="">
xyz
</a> (All Rights Reserved)
</span>
</p>
</footer>
);
}
export default Footer;
Code snippet in import Enter from './Enter';
import React from 'react';
import { Link } from 'react-router-dom';
const Enter = () => {
return(
<div className="app-content content">
<div className="content-wrapper">
<div className="content-body">
<div className="row">
<div className="col-md-12">
<div className="card" style={{'height': 'auto'}}>
<div className="card-header">
<h4 className="card-title" id="basic-layout-form">Create New Client</h4>
<a className="heading-elements-toggle"><i className="fa fa-ellipsis-v font-medium-3"></i></a>
<div className="heading-elements">
<ul className="list-inline mb-0">
<li><Link to="/dashboard">Dashboard</Link></li>
<li><i className="ft-chevrons-right"></i></li>
<li><a>Create</a></li>
<li><i className="ft-chevrons-right"></i></li>
<li><Link to="/create">Enter New</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Enter;
in the Enter code snippet there are 2 links(Breadcrumbs) when i click on them the page loads dynamically without refresh.
But when i click on the links in sidebar, the entire page reloads to display the content, why is it so? What is wrong?