You cannot render a inside another . 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.

The code you've shown looks fine; it just has one router (the `` element). So it's probably in one of those other components where the duplicate router is. — Nicholas Tower, Nov 03 '21 at 16:36
Can you check the App.js code which I have used in React Router version 5 — Nuwan Chamikara, Nov 03 '21 at 16:49
It's a design decision. Nested routers are no longer supported in version 6. — tim-montague, Nov 05 '21 at 00:42
The possible error is with . You might have included this element in your Index.js and in your App.js both. You should keep it in any one file. — Shweta, Jun 07 '22 at 10:47

score 33 · Accepted Answer · answered Nov 24 '21 at 23:26

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

`HomeLayoutRoute` and `PrivateRoute` are invalid children of the `Routes` component. Only `Route` and `React.Fragment` are valid children of the `Routes` component. — Drew Reese, May 09 '23 at 23:52

score 9 · Answer 2 · answered Jan 19 '22 at 11:34

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;

Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_3__.render is not a function — aksyuma, Aug 14 '22 at 21:02

score 4 · Answer 3 · answered Jun 07 '22 at 10:51

4

One possible error might be with

<BrowserRouter>

You might have included this element in your App.js and in your Index.js both.

You can check and keep this element in any one file so nesting of duplicate routes will be removed.

Hope it helps!

answered Jun 07 '22 at 10:51

Shweta

661
6
11

Tiago Jerónimo · Answer 4 · 2021-11-03T16:57:11.687

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).

You 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. — Tiago Jerónimo, Nov 03 '21 at 17:09

score 1 · Answer 5 · answered Nov 05 '21 at 00:40

1

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

answered Nov 05 '21 at 00:40

tim-montague

16,217
5
62
51

score 1 · Answer 6 · edited Dec 03 '22 at 17:35

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 my GitHub repo: github.com/lodela/React18

Why am I having the error: "Property 'tab' does not exist on type 'IntrinsicAttributes'."? The version of react is 18. Thnx in advance — Ermal, Jun 19 '22 at 00:13
I couldn't reproduce the error... could you please share your code? — Norberto Lodela, Jun 22 '22 at 17:43

score 1 · Answer 7 · answered Dec 03 '22 at 13:59

1

after degrading react-router-dom@6 to react-router-dom@5 useNavigate is not working. useNavigate only works in react-router-dom@6

answered Dec 03 '22 at 13:59

Fahad Gul

11
1

score 1 · Answer 8 · answered May 29 '23 at 13:11

To resolve the error you encountered with duplicate BrowserRoutes in Index.js and App.js, you can follow these steps to improve your code:

Open the Index.js file and remove the BrowserRoute component if it's already present there. You should only have one instance of BrowserRouter in your application.

2.In App.js, wrap your entire component with the BrowserRouter component, and place your routes inside it:

3.Remove any BrowserRouter components from Index.js since you already have them in App.js. Index.js should only render the App component

This answer was written by ChatGPT, not by you. Please delete it before you get into bigger trouble, because we take plagiarism seriously here. — tchrist, Jun 27 '23 at 12:19

score 0 · Answer 9 · answered Nov 03 '21 at 16:48

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

score 0 · Answer 10 · answered Jan 06 '22 at 13:12

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 react-router-dom@5.0.0

score 0 · Answer 11 · answered Jul 13 '23 at 08:02

0

don't use this BrowserRouter and this createBrowserRouter you need just one of them in v6

answered Jul 13 '23 at 08:02

Ghazaleh Javaheri

1,829
19
25

score -3 · Answer 12 · edited Mar 21 '22 at 07:09

-3

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 react-router-dom@5.3.0

edited Mar 21 '22 at 07:09

Wrichik Basu

1,005
17
28

answered Mar 20 '22 at 10:03

Anup Poudel

3
1

This is very unhelpful. The goal is to resolve this with version 6. – Nemanja Milosavljevic Sep 13 '22 at 20:40

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

12 Answers12

Linked

Related