title: React Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app
body: <p>[index.js]</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import &quot;./index.css&quot;;
  import App from &quot;./App&quot;;
  import reportWebVitals from './reportWebVitals';
  import { BrowserRouter } from &quot;react-router-dom&quot;;
  import 'bootstrap/dist/css/bootstrap.min.css';
  import clayful from 'clayful/client-js';
  
  import axios from 'axios';
  
  clayful.config({
    client: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6ImE0Mzg5MjhjNWZkNjFiNzkwNzc5OTU3MGRiZmUyYzE5ZTQ...'
  });
  
  clayful.install('request', require('clayful/plugins/request-axios')(axios));
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;BrowserRouter&gt;
      &lt;App /&gt;
      &lt;/BrowserRouter&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  
  </code></pre>
  <p>[App.js]</p>
  <pre><code>import logo from './logo.svg';
  import React from 'react';
  import './App.css';
  import { Route, Router } from &quot;react-router-dom&quot;; 
  import LandingPage from './pages/LandingPage/LandingPage';
  import LoginPage from './pages/LoginPage/LoginPage';
  import RegisterPage from './pages/RegisterPage/RegisterPage';
  
  function App() {
    return (
      &lt;Router&gt;
        &lt;Route path=&quot;/&quot; element={&lt;LandingPage /&gt;} /&gt; 
        &lt;Route path=&quot;/login&quot; element={&lt;LoginPage /&gt;} /&gt;   
        &lt;Route path=&quot;/register&quot; element={&lt;RegisterPage /&gt;} /&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p>React Error: You cannot render a  inside another . You should never have more than in your app&gt; error occurs. Give them a hand.
  Is &quot;react-router-dom&quot; the problem?
  Is it because of &quot;react6&quot; or do we need to downgrade to &quot;react5&quot;?</p>