You should not use route or withrouter() or Link outside a router

React router throws the error, “you should not use route or withrouter() outside a router” when you have not defined BrowserRouter and still using Link or NavLink or Router components.

Usually we want navigation over our entire app. So, we declare BrowserRouter in index.js file.

To solve this issue, follow these steps –

In index.js file, import BrowserRouter from react-router-dom package and wrap the App component in it.

import React from 'react';
import ReactDOM from "react-dom";
import App from './App';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

    Tweet this to help others

Now you can easily use Link, NavLink, Route etc. anywhere in your project without populating the error regarding use of route or withrouter() outside a router.

Live Demo