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

【问题标题】：How to fix a 404 on react app deployed on github pages?如何修复部署在 github 页面上的 react 应用程序的 404？
【发布时间】：2020-12-27 10:45:50
【问题描述】：

我尝试在 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。

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

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

【问题讨论】：

标签： reactjs github-pages

【解决方案1】：

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

尝试删除exact路由并添加新路由：

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

【讨论】：