i'm currently working on my portfollio using react js but i'm stuck with this error.

my portfollio is very simple, there is home section which is the component showed when you go on the website with the route "/", a project section and a contact section.

this error is only detected when i refresh page on "secondary pages", section and contact what redirect me to an 404 error on my website.

if somebody can help me i will be grateful :)

here is my app code with the routing, browserRouter is in index.js with app component in :

//import

import Home from "./pages/Home";
import Nav from "./components/Nav";
import GlobalStyle from "./components/GlobalStyle";
import ContactUs from "./pages/ContactUs";
import Projects from "./pages/projects";
import React from "react";
import { useEffect } from "react";


// import Routing
import { Route, Routes, useLocation} from "react-router-dom";
//animation
import {AnimatePresence} from "framer-motion";



//data

function App() {


  const location = useLocation();


  return (
    <div className="App">
          <GlobalStyle />
          <Nav />
          <AnimatePresence  exitBeforeEnter>
              <Routes location={location} key={location.pathname}>
                  <Route path="/" element={<Home />} />
                  <Route path="/contact" element={<ContactUs />} />
                  <Route path="/projects" element={<Projects/>} />
              </Routes>
          </AnimatePresence>
    </div>
  );
}

export default App;