Routing not working with deployed create-react-app on github pages with react-router v6

Question

Edit: I realized the problem was related to mistakes I was making with the deployment process.

I'm trying to get routing to work with a create-react-app I've deployed to github pages. None of the routes I have set up work, I just get the 404 screen for everything else except the homepage. I've tried following many other tutorials but none of them seem up to date. I'm using react-router v6 and I've tried using BrowserRouter and HashRouter but neither approach seems to be working.

My site: https://grantsuu.github.io/pages-routing/

My router in App.tsx file:

<HashRouter>
    <nav>
        <Link to="/">Home</Link>
        <Link to="page">Page</Link>
        <Link to="page/nested1">Nested 1</Link>
        <Link to="page/nested2">Nested 2</Link>
    </nav>
    <Routes>
        <Route path="/" element={<div>Home</div>} />
        <Route path="page" element={<div>Page</div>} />
        <Route path="page/nested1" element={<div>Nested 1</div>} />
        <Route path="page/nested2" element={<div>Nested 2</div>} />
    </Routes>
</HashRouter>

Package.json:

{
  "name": "pages-routing",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build src",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^4.0.0"
  }
}

Answer 1

I would look into using BrowserRouter like this:

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Route, Routes, Outlet } from "react-router-dom";

const App = () => {
  return (
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="page">Page</Link>
          <Link to="page/nested1">Nested 1</Link>
          <Link to="page/nested2">Nested 2</Link>
        </nav>
        <Outlet />
      </div>
  );
}


const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={ <App /> }>
          <Route path="page" element={<div>Page</div>} />
          <Route path="page/nested1" element={<div>Nested 1</div>} />
          <Route path="page/nested2" element={<div>Nested 2</div>} />
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

Whatever is passed in to the element prop of the child routes will be output to where the Outlet is in the App component.

https://reactrouter.com/docs/en/v6/components/outlet