title: You cannot render a <Router> inside another <Router>. You should never have more than one in your app
body: <pre><code>import { BrowserRouter, Routes, Route } from &quot;react-router-dom&quot;;
  
  //Layouts
  import HomeLayoutRoute from &quot;./components/layouts/HomeLayout&quot;;
  
  //components
  import Home from './components/Home';
  //import Dashboard from './components/Dash';
  
  // Routing
  import PrivateRoute from &quot;./components/routing/PrivateRoute&quot;;
  
  // Screens
  import PrivateScreen from &quot;./components/loginscreens/PrivateScreen&quot;;
  import LoginScreen from &quot;./components/loginscreens/LoginScreen&quot;;
  import RegisterScreen from &quot;./components/loginscreens/RegisterScreen&quot;;
  import ForgotPasswordScreen from &quot;./components/loginscreens/ForgotPasswordScreen&quot;;
  import ResetPasswordScreen from &quot;./components/loginscreens/ResetPasswordScreen&quot;;
  
  const App = () =&gt; {
    return (
      &lt;BrowserRouter&gt;
        &lt;div className=&quot;app&quot;&gt;
          &lt;Routes&gt; 
            &lt;HomeLayoutRoute path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
            &lt;PrivateRoute path=&quot;/&quot; element={&lt;PrivateScreen/&gt;} /&gt;
            &lt;Route path=&quot;/login&quot; element={&lt;LoginScreen/&gt;} /&gt;
            &lt;Route path=&quot;/register&quot; element={&lt;RegisterScreen/&gt;} /&gt;
            &lt;Route path=&quot;/forgotpassword&quot; element={&lt;ForgotPasswordScreen/&gt;}/&gt;
            &lt;Route path=&quot;/passwordreset/:resetToken&quot; element={&lt;ResetPasswordScreen/&gt;}/&gt;
          &lt;/Routes&gt;
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>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.</p>
  <p>This code works with React-Router-Dom Version 5, But When I move to React-Router-Dom version 6 this error came.</p>