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

Posted 2023-02-23

【中文标题】如何修复部署在 github 页面上的 react 应用程序的 404？

【英文标题】：How to fix a 404 on react app deployed on github pages?

【发布时间】：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 页面上正确部署它）。

【参考方案1】：

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

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

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