Cloudflare Pages 部署 React 项目后刷新页面出现 404，通常是因为单页应用（SPA）的路由模式与静态托管服务的文件查找机制不匹配，需要在项目中添加重定向规则或通过控制台开启 SPA 支持。
先说结论：这不是代码错误，而是服务器配置问题，通过添加 _redirects 文件或开启控制台 SPA 模式即可解决。
- 适合：使用 React Router 等前端路由的项目
- 先准备：确认构建输出目录是否正确
- 验收：重点测试刷新子路由是否报错
为什么会这样
React 项目通常是单页应用，路由跳转是在浏览器端完成的，服务器并没有真正生成 /about 或 /user/1 这样的 HTML 文件。当你直接访问首页时，服务器返回 index.html，React 接管后正常显示。但当你刷新子路由页面时，浏览器会向 Cloudflare Pages 请求该路径对应的文件，服务器找不到实体文件，就会返回 404 状态码。
Cloudflare Pages 默认是静态托管，它不知道你的 React 应用内部有哪些路由，所以需要显式告诉它：不管请求什么路径，只要找不到文件，都返回 index.html，让 React 自己去处理路由逻辑。
方案一：添加 _redirects 文件（推荐）
第一步：确认构建目录
检查你的项目配置，确认构建后的输出目录是 build 还是 dist。Cloudflare Pages 部署时需要填写正确的构建输出目录，否则文件路径会错乱。
第二步：创建重定向文件
在项目根目录的 public 文件夹下（Create React App 项目）或构建输出目录下，新建一个名为 _redirects 的文件（没有后缀名）。
第三步：写入规则
在 _redirects 文件中写入以下内容：
/* /index.html 200这表示所有路径（/*）都映射到 /index.html，并返回 200 状态码。
第四步：重新部署
提交代码到 Git 仓库，触发 Cloudflare Pages 自动构建，或者在本地使用 wrangler 命令重新上传。
方案二：Cloudflare 控制台开启 SPA 支持
除了修改代码文件，还可以直接在 Cloudflare 后台开启单页应用支持，无需手动创建 _redirects 文件。
操作步骤：
- 登录 Cloudflare Dashboard，进入 Pages 项目页面。
- 点击顶部导航栏的 Settings（设置）。
- 找到 Builds（构建） 部分。
- 开启 Single Page Application（单页应用） 开关。
- 保存设置并触发重新部署。
开启后，Cloudflare 会自动将所有非资产请求重定向到 index.html，效果与添加 _redirects 文件一致。
怎么验证是否生效
部署完成后，访问项目的任意子路由页面，例如 https://your-project.pages.dev/about。在页面上按 F5 刷新浏览器，如果页面正常显示且没有报错，说明配置生效。你也可以打开浏览器开发者工具的 Network 面板，刷新页面，查看 index.html 的请求状态码是否为 200。
常见坑
1. 文件名错误：_redirects 文件必须没有后缀名，不要写成 _redirects.txt。
2. HashRouter 混用：如果你使用的是 HashRouter（URL 中带 #），通常不需要配置重定向，因为 # 后面的内容不会发送给服务器。如果配置了 BrowserRouter 却又用了 Hash 模式，可能会导致路由混乱。
3. 基础路径配置：子路径部署配置较复杂，涉及 Router basename 和重定向规则调整，建议优先测试根路径部署。
参考来源
- Cloudflare Developers, "Redirects", https://developers.cloudflare.com/pages/platform/redirects/
- Cloudflare Developers, "Serve single-page applications (SPAs)", https://developers.cloudflare.com/pages/configuration/serving-pages/#site-behavior