Want to build Header component from Bootstrap template to React but my browser throwing below errors

Question

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;

Answer 1

In your App.js, Add Router component

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';
import {BrowserRouter as Router} from 'react-router-dom';


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

export default App;