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

Question

[index.js]

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
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(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

[App.js]

import logo from './logo.svg';
import React from 'react';
import './App.css';
import { Route, Router } from "react-router-dom"; 
import LandingPage from './pages/LandingPage/LandingPage';
import LoginPage from './pages/LoginPage/LoginPage';
import RegisterPage from './pages/RegisterPage/RegisterPage';

function App() {
  return (
    <Router>
      <Route path="/" element={<LandingPage />} /> 
      <Route path="/login" element={<LoginPage />} />   
      <Route path="/register" element={<RegisterPage />} />
    </Router>
  );
}

export default App;

React Error: You cannot render a inside another . You should never have more than in your app> error occurs. Give them a hand. Is "react-router-dom" the problem? Is it because of "react6" or do we need to downgrade to "react5"?

Answer 1

You're using two routers, as the error message suggests.

You have one in index.js:

<BrowserRouter>

And another in App.js

<Router>

Try it without the <Router> in App.js.

Answer 2

Both BrowserRouter and Router are considered to be routers. It looks like you may have a typo and should replace <Router> with <Routes> in App.js.

Answer 3

App.js in Router -> Routes Change.