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

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

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;

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

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

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

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

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

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!

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