CODEWITHSUNDEEP
reactjsversionreact-router-dom
Nuwan Chamikara
Nuwan Chamikara

Reputation: 886

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

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.

Upvotes: 42

Views: 141121

Answers (12)

sean le roy
sean le roy

Reputation: 567

I ran into this today and the issue was due to the fact in the app.js file I was importing:

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

while in a child component I was importing Link as follows:

import { BrowserRouter as Link } from "react-router-dom";

Took me a while to realise the issue. Instead Link should of been imported like:

import { Link } from "react-router-dom";

React should really have a better way of reporting this.

Upvotes: -2

Ghazaleh Javaheri
Ghazaleh Javaheri

Reputation: 2117

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

Upvotes: 0

Norberto Lodela
Norberto Lodela

Reputation: 39

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

Upvotes: 1

Fahad Gul
Fahad Gul

Reputation: 11

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

Upvotes: 1

Shweta
Shweta

Reputation: 799

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!

Upvotes: 9

Anup Poudel
Anup Poudel

Reputation: 1

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]

Upvotes: -5

mapa815
mapa815

Reputation: 141

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;

Upvotes: 12

omkar
omkar

Reputation: 1

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]

Upvotes: -2

antipodally
antipodally

Reputation: 614

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

Upvotes: 44

tim-montague
tim-montague

Reputation: 17382

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

Upvotes: 1

Tiago Jer&#243;nimo
Tiago Jer&#243;nimo

Reputation: 74

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

Upvotes: 1

Nuwan Chamikara
Nuwan Chamikara

Reputation: 886

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

Upvotes: 0

Related Questions