Getting A blank Page when Added Route in React

App.JSX

import './App.css';
import Navbar from './components/Navbar/Navbar';
import Home from './pages/Home/Home'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Navbar />
      <BrowserRouter>
         <Routes>
           <Route path='/home' element={<Home />} />
         </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Home.jsx

import React from 'react'
import Header from '../../components/Header/Header'

const Home = () => {
  return (
    <div>
      <Header />
    </div>
  )
}

export default Home

I want to load the Navbar and the Header file but it is not loading just showing me the blank page.

You might need to add index to the nested route:

function App() {
  return (
    <div className="App">
      <Navbar />
      <BrowserRouter>
         <Routes>
           <Route index path='/home' element={<Home />} />
         </Routes>
      </BrowserRouter>
    </div>
  );
}