React - Url is updating but component is not rerendering - reactjs

Question

I'm using react-router-dom for routing and the problem is that url is changing when clicked on navigation bar elements, but components belonging to other pages is not rerendering. Here are my codes:
App.js:
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import Header from './common/Header';
import Footer from './common/Footer';
import MainPage from './layout/MainPage';
import GiftWrapping from './layout/GiftWrapping';
import Contact from './layout/Contact';
import Catalog from './layout/Catalog';
function App() {
return (
<div className="App">
<Router>
<Header />
<Switch>
<Route path="/home" component={MainPage} />
<Route path="/catalog" component={Catalog} />
<Route path="/giftwrapping" component={GiftWrapping} />
<Route path="/contact" component={Contact} />
</Switch>
<Footer />
</Router>
</div>
);
}
export default App;
Header.js:
<nav className="Header-bottom">
<div className="container clearfix">
<Router>
<div className="Left-nav">
<ul>
<li>
<Link to={"/home"} className="active-nav-element">Main Page</Link>
</li>
<li>
<Link to={"/catalog"}>Catalog</Link>
</li>
<li>
<Link to={"/contact"}>Contact</Link>
</li>
<li>
<Link to={"/giftwrapping"}>Gift Wrapping</Link>
</li>
<li>
<Link to={"/catalog"} className="dropdown-toggle">Catalog</Link>
</li>
</ul>
</div>
</Router>
</div>
</nav>

Answer 1

import React from "react";
import { Link, withRouter } from "react-router-dom";
function Header() {
return (
<nav className="Header-bottom">
<div className="container clearfix">
<div className="Left-nav">
<ul>
<li>
<Link to={"/home"} className="active-nav-element">
Main Page
</Link>
</li>
<li>
<Link to={"/catalog"}>Catalog</Link>
</li>
<li>
<Link to={"/contact"}>Contact</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}
export default withRouter(Header);
Instead of adding a separate <Router> in the <header /> please use the withrouter method.
Codesandbox reference