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

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).

Answer 1

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>