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

user_19804610 0
Viewed 57

Guys I have this code in my App.js:

  return (
  <div className="App">
    
    
      <Routes>
      <Route path="/" element={<Index />} />
      
      <Route path="/404" element={<Err404 />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/register" element={<Register />} />
      <Route path="/login" element={<Login />} />
      
      </Routes>
  </div>
);

And I added the BrowserRouter in the index.js like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './pages/App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

But I still get that error above in the title.

reactjs
1 Answers

May you check all components in your Route?

<Index />
<Err404 />
<Contact />}
<Register />
<Login />} />

It seems that one of them contains Router or BrowserRouter, etc component.

[Updated] - if you are interested this is the line with that error in codebase - https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/components.tsx#L181

it checks if your Router component (e.g. BrowserRouter) is created in context of another Router component and throw this error

user_197421460
Related