React作品集部署GitHub Pages后空白页且控制台报404错误求助

• 检查package.json的homepage字段
  必须添加正确的路径配置，确保静态资源能被正确加载。在package.json中添加：

  "homepage": "https://elochimombe.github.io/portfolio/"
  

  或者简化为"/portfolio/"，这会让React在构建时自动给所有静态资源加上这个前缀。

• 替换React Router的路由模式
  如果使用了React Router，GitHub Pages不支持BrowserRouter的history模式，会导致路由跳转或刷新时404。将BrowserRouter替换为HashRouter：

  // 之前的代码
  import { BrowserRouter as Router } from 'react-router-dom';
  
  // 修改为
  import { HashRouter as Router } from 'react-router-dom';
  

• 确认gh-pages部署流程正确

  1. 安装依赖：npm install gh-pages --save-dev
  2. 在package.json的scripts中添加：

     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
     

  3. 执行部署命令：npm run deploy
  4. 去仓库的Settings -> Pages页面，确认部署源是gh-pages分支的根目录，等待部署完成（可能需要1-5分钟）。

• 验证构建后的资源路径
  本地执行npm run build后，打开build/index.html，查看其中的js、css文件引用路径，比如应该是/portfolio/static/js/main.xxx.js，而不是/static/js/main.xxx.js。如果是后者，说明homepage字段未生效，检查拼写是否正确。

• 检查仓库名称与路径匹配
  你的仓库名为portfolio，所以URL路径/portfolio/必须和仓库名完全一致，大小写也要匹配（GitHub仓库名是大小写敏感的）。

内容的提问来源于stack exchange，提问作者Elo Chimombe