React Router is not working and returns a blank page-CodePudding

I am trying to develop a multi-page React App and I tried to use React Router but when I hit Save and reload the page I get a blank page. This is what I have: The Home component:

import React from "react";
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import AboutUs from './components/AboutUs';
import Footer from './components/Footer';

export default function Home() {
    return (
      <div>
        <Navbar />
        <Hero />
        <AboutUs />
        <Footer />
      </div>
    )
}

This is App component:

import React from 'react';
import Home from './Home';
import { Route, Router, browserHistory, Link } from "react-router-dom";

export default function App() {
  return (
        <Router history={browserHistory}>
            <Router exact path="/" component={Home} />
        </Router>
  );
}

And finally this is the index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
);

When I hit Save and reload the page, because I am doing this on