GH Pages shows my homepage, but not any of my other paths

Question

(Repo Link) (live link)

Been struggling with gh-pages and react for a couple days now banging out my portfolio to display from the url; works perfectly fine on localhost. I got it to the point where the first page will show up just fine, but once you select another path from the nav bar it returns 404 error "Failed to load resource". I tried messing with basename routing a bunch of different ways, but no success. Any insight would be greatly appreciated!

Answer 1

The best practice is to use relative paths:

<a class="MuiButtonBase-root ..." tabindex="0" aria-disabled="false" href="projects">
  ^^^^^^^^

Instead of /iacoviello-portfolio-react/projects.

That supposes your router does manage those path, as in this example.

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="about">About</Link>
          </li>
          <li>
            <Link to="dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}