React router showing white blank page

Question

I don't understand why I am getting blank page even after changing Switch to Router, can anyone help to fix? App.js:

import './App.css';
import React from 'react'
import Form from './Components/Form';
import Person from './Components/Person'
import 'bootstrap/dist/css/bootstrap.min.css';
import Headers from './Components/Header';
import {
  BrowserRouter as Router,
  Routes,
  Route
} from "react-router-dom";

function App() {

  return (
    <Router>
    <div>
      <Headers></Headers>
        Welcome to home
  
        <Routes>
        <Route path="/form" element={<Form />}>
        </Route>
        <Route path="/person" element={<Person />}>
        </Route>
        <Route path="/" element={<App />}>
        </Route>
        </Routes>

    </div >

    </Router>
  )
}
export default App;

When I checked console log:

Uncaught Error: You cannot render a inside another . You should never have more than one in your app.

Answer 1

You're nesting the router as you're rendering <Route path="/" element={<App />}>. That's why you're getting the error.

I suggest you create another component (e.g. Home) to render for the root path. Take a look at the documentation.