after deploying reactjs website when i am refreshing the page i got error

after deploying reactjs website when i am refreshing the page i got error for example the home page is / but the other page /aboutme when i click on link it routes me to about me page but when i refresh in a page that is not a home page i got blank page or error in the local host all is fine but in deploy ment i got error

app.js file :

import './App.css';
import Navbar from './Navbar';
import './Navbar.css'

import AnimatedRoutes from './AnimatedRoutes';
import 'bootstrap/dist/css/bootstrap.min.css';
import {BrowserRouter as Router } from 'react-router-dom'

function App() {




  return (
<div>
<Router>
  <Navbar />

<AnimatedRoutes />

</Router>


</div>

  );
}

export default App;

animatedroutes.js file :

import React from 'react'
import {Routes,Route,useLocation} from 'react-router-dom'
import HomePage from './HomePage';
import AboutMe from './AboutMe';
import Resume from './Resume';
import Contact from './Contact';
import Certificates from './Certificates';
import {AnimatePresence} from 'framer-motion'

function AnimatedRoutes() {
    const location =useLocation();
   

  return (
  <AnimatePresence>


<Routes location={location} key={location.pathname}>
<Route exact path="/" element={<HomePage />} />
<Route path="/about" element={<AboutMe />} />
<Route path="/resume" element={<Resume />} />
<Route path="/contact" element={<Contact />} />
<Route path="/certificates" element={<Certificates />} />
</Routes>
  </AnimatePresence>

   
  )
}

export default AnimatedRoutes