error 404 when refreshing gh-pages. How would i fix this to route correctly?

Question

I have a multipage app deployed to gh-pages. Whenever i refresh the page i get an error 404. Can someone help me with this? I'm fairly new to making multipage sites and this is confusing me! everything else seems to work but this one problem.

How would i fix this to route correctly?

[VIEW SITE HERE!][1] [Sources for code here][2]

**App.js**

import "./App.css";
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./Navbar/Navbar";
import Home from "./Navbar/Home";
// import Contact from "./Navbar/Contact";
import Gallery from "./Navbar/Gallery";
import Investment from "./Navbar/Investment";
import Projects from "./Navbar/Projects";

import Footer from "./Footer/Footer";
import About from "./About";

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />

        <Routes>
          <Route path="/photo-gallery" element={<Home />} exact></Route>
          <Route path="/about" element={<About />} exact></Route>
          {/* <Route path="/contact" element={<Contact />} exact></Route> */}
          <Route path="/gallery" element={<Gallery />} exact></Route>
          <Route path="/investment" element={<Investment />} exact></Route>
          <Route path="/projects" element={<Projects />} exact></Route>
        </Routes>
      </Router>
      <Footer />
    </div>
  );
}

export default App;




**Navbar.js**

import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./Navbar.css";

const Navbar = () => {
  const [isMobile, setIsMobile] = useState(false);
  return (
    <nav className="nav-bar">
      <h1>Noah Nigel </h1>
      <ul
        className={isMobile ? "nav-links-mobile" : "nav-links"}
        onClick={() => setIsMobile(false)}
      >
        <Link to="/photo-gallery" className="home">
          <li>Home</li>
        </Link>

        <Link to="/about" className="about">
          <li>About</li>
        </Link>

        <Link to="/Gallery" className="gallery">
          <li>Gallery</li>
        </Link>

        <Link to="/investment" className="investment">
          <li>Investment</li>
        </Link>

        <Link to="/projects" className="projects">
          <li>Code</li>
        </Link>

        {/* <Link to="/contact" className="contact">
            <li>Contact</li>
          </Link> */}
      </ul>
      <button className="mobile-menu"
        onClick={() => setIsMobile(!isMobile)}
      >
        {isMobile ? (
          <ion-icon name="close-outline"></ion-icon>
        ) : (
          <ion-icon name="menu-outline"></ion-icon>
        )}
      </button>
    </nav>
  );
};

export default Navbar;


  [1]: https://noahfarinas.github.io/photo-gallery/
  [2]: https://github.com/noahfarinas/photo-gallery