actualmente estoy trabajando en mi cartera usando reaccionar js pero estoy atascado con este error.

mi portafolio es muy simple, hay una sección de inicio que es el componente que se muestra cuando ingresas al sitio web con la ruta "/", una sección de proyecto y una sección de contacto.

este error solo se detecta cuando actualizo la página en "páginas secundarias", sección y contacto que me redirigen a un error 404 en mi sitio web.

si alguien me puede ayudar se lo agradecere :)

aquí está el código de mi aplicación con el enrutamiento, browserRouter está en index.js con el componente de la aplicación en:

 //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;