How to Fix “You Cannot Render a Router Inside Another Router” in React

Have you ever started your React application and suddenly encountered this error?

Error: You cannot render a <Router> inside another <Router>.
You should never have more than one in your app.

If yes, don't worry! This is a common React Router issue, especially when setting up navigation in a new React project.

In this guide, I'll explain what causes the error, how to fix it step by step, and how to avoid it in future projects—even if you're a beginner.

What Is the Error?

React Router helps developers navigate between pages without reloading the entire application.

For example, you might use it to navigate between:

• / — Home page

• /about — About page

• /dashboard — Dashboard

• /profile — User profile

However, React Router expects your application to use a single top-level router for a given routing context.

If you accidentally wrap a component in another BrowserRouter, React Router throws the error because it detects a router inside an existing router.

Where Did the Error Happen?

This error commonly appears when:

• Setting up React Router for the first time.

• Adding navigation to an existing React project.

• Wrapping your application in BrowserRouter more than once.

• Importing a component that already contains a router.

• Configuring routing separately in main.jsx and App.jsx.

For example, your application might have BrowserRouter in both files.

What I Tried First

Initially, you might think the problem is caused by an incorrect route, a missing import, or a problem with the installed package.

You may try restarting the development server or reinstalling react-router-dom.

However, these steps won't fix the underlying problem if your application still contains nested routers.

The real solution is to find the duplicate router and keep only one top-level router.

The Fix: Step by Step

Step 1: Check Your main.jsx File

A typical React application uses BrowserRouter to wrap the main application component.

Your main.jsx file should look similar to this:

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

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

Here, BrowserRouter provides routing functionality to the entire application.

Step 2: Check Your App.jsx File

Now open App.jsx.

If you already wrapped your application in BrowserRouter inside main.jsx, don't wrap it again in App.jsx.

Incorrect example:

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<h1>Home Page</h1>} />
        <Route path="/about" element={<h1>About Page</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

The problem is the extra BrowserRouter.

Step 3: Remove the Duplicate Router

Replace the previous code with this corrected version:

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/" element={<h1>Home Page</h1>} />
      <Route path="/about" element={<h1>About Page</h1>} />
    </Routes>
  );
}

export default App;

Now your application has one top-level BrowserRouter in main.jsx, while App.jsx contains only the route definitions.

Step 4: Save and Test Your Application

Save both files and check the browser.

If your development server is already running, React usually refreshes the application automatically.

If necessary, restart it:

npm run dev

For a Create React App project, the usual command is:

npm start

Visit your application and test both the home page and the About page.

The error should disappear if the duplicate router was the cause.

Why Did This Error Happen?

The root cause is that the application was wrapped in more than one router.

For example:

BrowserRouter
└── App
    └── BrowserRouter
        └── Routes

This creates an unnecessary nested router structure.

The correct structure is:

BrowserRouter
└── App
    └── Routes
        ├── Home Page
        └── About Page

The top-level router provides routing context to the components beneath it. Those components can then use Routes, Route, Link, and other appropriate React Router features without creating another top-level router.

How to Avoid This Error Next Time

Here are five practical tips:

1. Use one top-level router: Keep BrowserRouter in one place, usually main.jsx or index.jsx.

2. Check your component tree: Before adding a router, check whether a parent component already provides one.

3. Keep routing organized: Define your routes in App.jsx or a dedicated routing component.

4. Avoid unnecessary reinstallations: Check the component structure before deleting node_modules or reinstalling packages.

5. Review shared layouts: If you use layouts, dashboards, or nested routes, remember that they generally don't need their own BrowserRouter.

If you intentionally need an isolated routing context, review the appropriate router configuration for your use case rather than blindly adding another BrowserRouter.

Final Thoughts

The “You cannot render a Router inside another Router” error may look confusing, but the solution is often simple: identify the duplicate router and remove it.

Understanding how routing context works will help you build cleaner React applications and debug similar issues faster.

If this guide helped you, save it for your next React project and share it with another developer who might be facing the same problem.

Keep learning, keep building, and keep debugging!