How to fix a 404 on react app deployed on github pages?

Question

I have tried to deploy my react app on github pages, but am getting a 404 error. However the site is able to access my app as the 404 page is my custom one. I followed the deployment steps from https://github.com/gitname/react-gh-pages.
The github page is https://ritsar.github.io/LapStore/ and the respective remote repository is at https://github.com/RitSar/LapStore. I get no errors on the terminal when i run npm run deploy.
I am trying to make ritsar.github.io/LapStore my root, i.e to access index.html. On navigating within the site from the navbar, home page is directed to ritsar.github.io/,where images are not accessible and cart is directed to /cart instead of /LapStore/cart.

package.json

{
  "homepage": "http://RitSar.github.io/LapStore",
  "name": "e-commerce",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.2",
    "jquery": "^3.5.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-owl-carousel": "^2.3.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "serialize-javascript": "^4.0.0",
    "styled-components": "^5.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "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": "^3.1.0"
  }
}

I have tried changing "homepage" to "http://RitSar.github.io", ".", "http://RitSar.github.io/LapStore/index.html", made minor changes to index.html and redeployed, changed branch folder on github settings to /docs from /(root) as per relative suggestions from other threads.
Same app hosted on heroku is at https://lapstore-ritsar.herokuapp.com/. (Page loading slowly despite of images having size less than 50kb is an issue for another time, I would like to know how to correctly deploy the same on github pages).

Khanh Le Tran Khanh Le Tran · Accepted Answer · 2020-09-09T04:02:59

Your main page with router <Route exact path="/" component={ProductList}></Route>. With exact path, it will not work on gh-page and you need to add 1 more route /LapStore.

Try to remove exact the route and add new route:

<Route path="/" component={ProductList}></Route>
<Route path="/LapStore" component={ProductList}></Route>

How to fix a 404 on react app deployed on github pages?

1 Answers