如何修复部署在 github 页面上的 React 应用程序上的 404？

Question

我曾尝试在 github 页面上部署我的 React 应用程序，但出现 404 错误。 但是该站点能够访问我的应用程序，因为 404 页面是我的自定义页面。 我遵循https://github.com/gitname/react-gh-pages 中的部署步骤。
github 页面是https://ritsar.github.io/LapStore/ ，相应的远程存储库位于https://github.com/RitSar/LapStore 。 当我运行npm run deploy时，我在终端上没有收到任何错误。
我正在尝试将ritsar.github.io/LapStore我的根目录，即访问 index.html。 从导航栏在网站内导航时，主页被定向到ritsar.github.io/ ，其中图像不可访问，购物车被定向到/cart而不是/LapStore/cart 。

包.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"
  }
}

我曾尝试将"homepage"更改为"http://RitSar.github.io" 、 "." , "http://RitSar.github.io/LapStore/index.html" ，对 index.html 进行了细微的更改并重新部署，根据其他线程的相关建议，将 github 设置上的分支文件夹从/(root)更改为/docs .
heroku 上托管的同一应用程序位于https://lapstore-ritsar.herokuapp.com/ 。 （尽管图像大小小于 50kb，但页面加载缓慢是另一个问题，我想知道如何在 github 页面上正确部署相同的页面）。

Answer 1

带有路由器的主页<Route exact path="/" component={ProductList}></Route> 。 使用exact路径，它将无法在 gh-page 上工作，您需要再添加 1 个路由/LapStore 。

尝试删除exact的路线并添加新路线：

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