You cannot render a <Router> inside another <Router>. You should never have more than one in your app
Solution 1
Set up your index.js file similar to this
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={ <App /> }>
</Route>
</Routes>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
Then remove BrowserRouter in your App.js file
const App = () => {
return (
<div className="app">
<Routes>
<HomeLayoutRoute path="/" element={<Home />} />
<PrivateRoute path="/" element={<PrivateScreen/>} />
<Route path="/login" element={<LoginScreen/>} />
<Route path="/register" element={<RegisterScreen/>} />
<Route path="/forgotpassword" element={<ForgotPasswordScreen/>}/>
<Route path="/passwordreset/:resetToken" element={<ResetPasswordScreen/>}/>
</Routes>
</div>
);
};
Solution 2
Try this!
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
App.js
Note that you need to import { Routes, Route } instead of { Route } (as it was in previous versions). Also, note that on the App.js file, it is not necessary to import BrowserRouter again.
import { Routes, Route } from "react-router-dom";
import AllPages from "./pages/AllPages";
import NewContactsPage from "./pages/ContactsPage";
import FavoritesPage from "./pages/Favorites";
function App() {
return (
<div>
<Routes>
<Route path="/" element={<AllPages />} />
<Route path="/new-contacts" element={<NewContactsPage />} />
<Route path="/favorites" element={<FavoritesPage />} />
</Routes>
</div>
);
}
export default App;
Solution 3
As of React Router version 6, nested routers will not be supported. So for example, you can't use <MemoryRouter>
inside <BrowserRouter>
.
Please see: https://github.com/remix-run/react-router/issues/7375
Solution 4
As of React Router version 6, nested routers will not be supported. So for example, you can't use <MemoryRouter>
inside <BrowserRouter>
.
Please see: https://github.com/remix-run/react-router/issues/7375
Comments
-
Nuwan Chamikara almost 2 years
import { BrowserRouter, Routes, Route } from "react-router-dom"; //Layouts import HomeLayoutRoute from "./components/layouts/HomeLayout"; //components import Home from './components/Home'; //import Dashboard from './components/Dash'; // Routing import PrivateRoute from "./components/routing/PrivateRoute"; // Screens import PrivateScreen from "./components/loginscreens/PrivateScreen"; import LoginScreen from "./components/loginscreens/LoginScreen"; import RegisterScreen from "./components/loginscreens/RegisterScreen"; import ForgotPasswordScreen from "./components/loginscreens/ForgotPasswordScreen"; import ResetPasswordScreen from "./components/loginscreens/ResetPasswordScreen"; const App = () => { return ( <BrowserRouter> <div className="app"> <Routes> <HomeLayoutRoute path="/" element={<Home />} /> <PrivateRoute path="/" element={<PrivateScreen/>} /> <Route path="/login" element={<LoginScreen/>} /> <Route path="/register" element={<RegisterScreen/>} /> <Route path="/forgotpassword" element={<ForgotPasswordScreen/>}/> <Route path="/passwordreset/:resetToken" element={<ResetPasswordScreen/>}/> </Routes> </div> </BrowserRouter> ); }; export default App;
This is my App.js file This is the Error : Error: You cannot render a inside another . You should never have more than one in your app.
This code works with React-Router-Dom Version 5, But When I move to React-Router-Dom version 6 this error came.
-
Nicholas Tower over 2 yearsThe code you've shown looks fine; it just has one router (the
<BrowserRouter>
element). So it's probably in one of those other components where the duplicate router is. -
Nuwan Chamikara over 2 yearsCan you check the App.js code which I have used in React Router version 5
-
tim-montague over 2 yearsIt's a design decision. Nested routers are no longer supported in version 6.
-
-
Nuwan Chamikara over 2 yearsIn version 6 <Switch> replace with <Routes> .
-
Tiago Jerónimo over 2 yearsYou are right, I was not aware of that. And it seems that you can have nested Routes as well, so this error doesn't make a lot of sense for this version. Can you double-check in your package-lock/yarn.lock that your project is really using react-router-dom v6? Also, keep in mind that v6 it's still under active development.