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

Question

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.

Answer 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>
  );
};

Answer 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;

Answer 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

Answer 4

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

//Layouts
import HomeLayoutRoute from "./components/layouts/HomeLayout";

//components
import Home from './components/Home';
//import Dash from './components/DashBoard';

// 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 (
    <Router>
      <div className="app">
        <Routes>
          <HomeLayoutRoute exact path="/" component={Home} />
          <PrivateRoute exact path="/" component={PrivateScreen} />
          <Route exact path="/login" component={LoginScreen} />
          <Route exact path="/register" component={RegisterScreen} />
          <Route
            exact
            path="/forgotpassword"
            component={ForgotPasswordScreen}
          />
          <Route
            exact
            path="/passwordreset/:resetToken"
            component={ResetPasswordScreen}
          />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

This is the Code I have used with React-Router-Dom Version 5 I think problem with the Version 6

Answer 5

I'm using react-router-dom version 5.3.0 and I can't find an exported member named 'Routes'. Not sure if this member comes from an older version of react-router-dom.

That said, I think you might want to replace <Routes> with <Switch>.

<Switch> renders the first child <Route> or <Redirect> that matches the location.

<BrowserRouter>
  <div className="app">
    <Switch> 
      <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/>}/>
    </Switch>
  </div>
</BrowserRouter>

(https://reactrouter.com/web/api/Switch)

Edit: As for the error: "You cannot render a inside another . You should never have more than one in your app" -> I think it might be related to the problem I mentioned above but it can also be because you have a duplicated router inside another. (E.g. the component <ForgotPasswordScreen/> contains another <Route> element inside).

Answer 6

If nothing is working for you do this change the version but first erase the react-router-dom:6.something dependency from package.json folder and then

1). Uninstall Previous Version- npm uninstall react-router-dom 2). Install Older version- npm install [email protected]

Answer 7

We found that this problem happens when we use React Router version 6. In this version, nested routers are not supported. So, we uninstalled version 6 and installed version 5 to solve this issue quickly.

Uninstall version 6:

npm uninstall react-router-dom

Install version 5:

npm install [email protected]

Answer 8

I'm sorry, but, YOU DON'T NEED TO CHANGE THE VERSION

If You're working with React v.18 You must update the rendering @ index.js to the propper and documented way to render root/app file... please visit this link for more details: Updates to Client Rendering APIs

in your index.js:

import { createRoot } from 'react-dom/client';
import { App } from './App';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App tab='home' />);

in your App.jsx:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { AppNav } from "./Components/AppNav";
import { Home } from "./Pages/Home";
import { Users } from "./Pages/Users";
export const App = () => {
  return (
    <Router>
      <AppNav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users" element={<Users />} />
      </Routes>
    </Router>
  );

To see a working sample/code please visit: github.com/lodela/React18

Hope this help. NL