部署React作品集至GitHub Pages时遭遇404及其他错误求助

针对你遇到的初始加载404、刷新后报错的问题，给你几个针对性的解决步骤：

• 配置package.json的homepage字段
  在项目根目录的package.json里添加一行：

  "homepage": "https://shivam242001.github.io/"
  

  这个配置会让React打包时生成正确的静态资源路径，避免初始加载时找不到js、css文件的404。

• 替换路由组件为HashRouter
  GitHub Pages是静态托管服务，不支持BrowserRouter的HTML5 History模式，刷新时会找不到对应路由的页面。把项目里的BrowserRouter换成HashRouter：
  比如在index.js里：

  // 之前的代码
  import { BrowserRouter } from 'react-router-dom';
  // 改成
  import { HashRouter } from 'react-router-dom';
  
  // 然后把<BrowserRouter>换成<HashRouter>
  ReactDOM.render(
    <HashRouter>
      <App />
    </HashRouter>,
    document.getElementById('root')
  );
  

  这样路由会以#开头，刷新时不会触发服务器请求，就能避免刷新后的报错。

• 检查部署脚本和依赖
  确保已经安装了gh-pages依赖：

  npm install gh-pages --save-dev
  

  然后在package.json的scripts里添加：

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

  运行npm run deploy会自动打包并把build文件夹的内容推到gh-pages分支，之后去GitHub仓库的Settings -> Pages里，把部署来源设置为gh-pages分支的根目录。

• 确认仓库部署设置
  因为你的仓库是username.github.io格式的，也可以直接把build文件夹的内容推到main分支的根目录（注意覆盖原有文件），然后在Pages设置里选择main分支的根目录作为部署来源。

按照这些步骤重新部署后，应该能解决你遇到的两种错误。

内容的提问来源于stack exchange，提问作者shivam nanda