React博客WebApp部署到GitHub Pages后报404、无法拉取JSON数据怎么解决？

1. 数据拉取失败原因及解决方案 #

你代码中所有接口请求都硬编码为本地json-server的地址http://localhost:8000，该地址仅在你本地启动服务时可用，部署到GitHub Pages后不存在对应后端服务，因此无法拉取数据。

可选解决方案： #

• 纯静态展示方案：将博客数据JSON文件放入项目public目录下，修改请求路径为相对路径，注意增加仓库名前缀适配GitHub Pages的部署路径，示例：

  // 修改前
  useFetch('http://localhost:8000/blogs/' + id);
  // 修改后，假设你把blogs.json放到public/data目录下
  useFetch('/BlogWebApp/data/blogs.json');
  

  拉取到全量博客数据后，再根据路由参数的id筛选出对应博客即可，删除功能可做前端模拟或者直接移除。
• 保留增删改查方案：将后端服务部署到可公开访问的云服务平台，替换代码中所有http://localhost:8000为部署后的公网后端地址，同时配置后端CORS规则允许GitHub Pages域名的跨域请求。

2. 页面404原因及解决方案 #

如果你的路由使用react-router-dom的BrowserRouter模式，GitHub Pages默认不支持单页应用的前端路由规则，用户直接访问子路由或刷新页面时会触发404。

解决方案： #

将项目的路由模式替换为HashRouter，并配置basename为你的仓库名：

// 原代码
import { BrowserRouter as Router } from 'react-router-dom';
// 修改后
import { HashRouter as Router } from 'react-router-dom';

// 路由组件配置时增加basename
<Router basename="/BlogWebApp">
  {/* 路由规则 */}
</Router>

额外注意项 #

在package.json中增加配置项"homepage": "https://manishya1669.github.io/BlogWebApp/"，避免打包后静态资源路径错误。

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