Want to build Header component from Bootstrap template but my browser is throwing the following error:

Uncaught Error: Invariant failed: You should not use <NavLink> outside a <Router>

The above error occurred in the <Router.Consumer> component

I imported:

import React from 'react';
import { NavLink } from 'react-router-dom';

in my Header.js and converted my all <a> in <NavLink to='/Shop' >Shop</NavLink>

and my App.js is like this:

import Header from './components/Header';
import Footer from './components/Footer';
import Home from './container/Home';
import Shop from './container/Shop';
import {Switch} from 'react-router-dom';
import {Route} from 'react-router-dom';


function App() {
  return (
    <>
      <Header />
        <Switch>
          <Route path='/' exact component={Home} />
          <Route path='/shop' exact component={Shop} />
        </Switch>
      <Footer />
    </>
  );
}

export default App;