ReactJS multipage app uploaded on github and gh-pages not working

Question

I am trying to get my home page to show up under the gh-pages link but nothing has been working for me. Is there any way to designate a homepage on my app? if so how would i translate that!

thank you!

here is my gh-page!

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 Footer from "./Footer/Footer";
import About from "./About";

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

        <Routes>
          <Route path="/" 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>
        </Routes>
      </Router>
      <Footer />
    </div>
  );
}

export default App;

Answer 1

The reason it's not working is because the routes are not being rewritten to index.html. A simple solution would be to copy your build/index.html to build/404.html and your issue should be fixed.
To automate this process update your npm script to create a copy of index.html to 404.html using command line like cp