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

Question

This is my main index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
import * as serviceWorker from './serviceWorker';
import { HelmetProvider } from 'react-helmet-async';
import ProductsContextProvider from './contexts/ProductsContext';
import CartContextProvider from './contexts/CartContext';

ReactDOM.render(
  <HelmetProvider>
    <ProductsContextProvider>
      <CartContextProvider>
        <Routes />
      </CartContextProvider>
    </ProductsContextProvider>
  </HelmetProvider>,
  document.getElementById('root')
);

This is my index.js in routes folder which handles my routes.

import React from "react";
import {
  BrowserRouter as Router,
  Route,
} from "react-router-dom";

import Store from '../pages/store';
import About from '../pages/About';
import NotFound from '../pages/NotFound';
import Cart from "../pages/cart";

const Routes = () => {
  return (
    <Router>
      <Routes>
        <Route path="/about" component={<About />} />
        <Route exact path="/" component={<Store />}/>
        <Route path="/cart" component={<Cart />} />
        <Route path="*" component={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default Routes;

Still this error is showing:

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

I cannot understand where is the routes problem.

Answer 1

Your Routes component renders a Router component and is recursively rendering itself. This nests a router within a router, etc.

Change the name of Routes to something else so there's not a naming conflict with the Routes component you should be importing from react-router-dom. The Route component uses the element prop for its renderable content.

Example:

import React from "react";
import {
  BrowserRouter as Router,
  Routes, // <-- add import
  Route,
} from "react-router-dom";

import Store from '../pages/store';
import About from '../pages/About';
import NotFound from '../pages/NotFound';
import Cart from "../pages/cart";

const AppRoutes = () => {
  return (
    <Router>
      <Routes>
        <Route path="/about" element={<About />} /> // <-- use element prop
        <Route path="/" element={<Store />}/>
        <Route path="/cart" element={<Cart />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default AppRoutes;

import React from 'react';
import ReactDOM from 'react-dom';
import AppRoutes from './routes';
import * as serviceWorker from './serviceWorker';
import { HelmetProvider } from 'react-helmet-async';
import ProductsContextProvider from './contexts/ProductsContext';
import CartContextProvider from './contexts/CartContext';

ReactDOM.render(
  <HelmetProvider>
    <ProductsContextProvider>
      <CartContextProvider>
        <AppRoutes />
      </CartContextProvider>
    </ProductsContextProvider>
  </HelmetProvider>,
  document.getElementById('root')
);