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

Comments

About the Author

akamit

I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

View All Articles