I am creating a website using ReactJS and am trying to publish on github using github pages. However I am having issues:

I’ve seen all 404-related questions here with no luck.

My package.json:

{
  "name": "mywebsite_(copy)",
  "version": "0.1.0",
  "homepage": "https://mywebsite.github.io/mywebsite", 
  "private": false,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.5.0",
    "@types/node": "^16.11.14",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "^5.0.1",
    "serve": "^14.2.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "live": "nodemon server.js"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "nodemonConfig": {
    "ext": "js css"
  },
  "devDependencies": {
    "gh-pages": "^6.1.1"
  }
}

Here are my routes in App.js:

<Routes>
      <Route path="/" element={<Homepage />} />
      <Route path="/aboutus" element={<AboutUs />} />
      <Route path="/appointment" element={<Form/>} />
</Routes>

I’ve tried changing in package.json:

1. homepage property e.g
   "homepage": "https://mywebsite.github.io/mywebsite"
   OR
   "homepage": "./"
   OR
   "homepage": "https://github.com/mywebsite/mywebsite.github.io"

2. private property
   "private": false
   OR
   "private": true

So I’m not sure what the issue is. Perhaps issues with the Router or absolute links rather than relative links in build/index.html?