React Build本地正常但部署后多数页面404，疑与react-snap相关

你的问题核心是react-snap预渲染未生成对应路由的静态HTML文件：本地用server -s build能正常访问，是因为该命令会把所有404请求 fallback 到index.html（SPA的常规处理逻辑）；但服务器部署时，若没配置fallback规则，或者静态文件本身缺失，就会直接返回404错误。

1. 检查react-snap配置正确性 #

确保package.json里的脚本和配置符合要求：

• 修改build脚本，让react-snap在CRA构建后执行：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && react-snap",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

• 添加reactSnap配置，手动列出需要预渲染的路由（动态路由需补充测试用例路由）：

  "reactSnap": {
    "inlineCss": true,
    "routes": [
      "/",
      "/about",
      "/contact" // 替换成你的实际路由列表
    ]
  }
  

2. 修复React 18与react-snap的兼容问题 #

react-snap目前对React 18的createRootAPI支持不完善，可临时切换回React 17的渲染写法：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

3. 验证预渲染是否生效 #

执行npm run build后，进入build目录检查：每个路由应对应生成单独的HTML文件（比如/about对应build/about/index.html）。若文件缺失，可能是以下原因：

• 路由为动态生成（比如从API获取），爬虫无法识别；
• 组件有异步加载逻辑，爬虫等待超时；
• 页面需要登录权限，爬虫无法访问。

对应调整方案：

• 手动在reactSnap.routes中补全所有需要预渲染的路由；
• 配置waitFor选项延长爬虫等待时间：

  "reactSnap": {
    "waitFor": 3000, // 等待3秒再生成HTML
    "routes": ["/", "/about"]
  }
  

4. 服务器端配置fallback（兜底方案） #

如果预渲染始终无法覆盖所有页面，务必在服务器配置SPA fallback：

• Nginx：在配置文件中添加

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• Apache：在.htaccess中添加

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

  这样即使静态HTML缺失，服务器也会返回index.html，由React Router处理路由。

5. 替代方案：更换预渲染工具 #

若react-snap的问题无法解决，可尝试其他工具：

• react-snapshot：轻量预渲染工具，配置简单；
• Next.js：SSG（静态站点生成）对React 18支持完善，适合重构项目；
• Gatsby：针对静态内容优化，自带完整的静态生成能力。

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