React部署后页面跳转空白，请求JS返回HTML内容问题如何解决？

开发者阿泽

2026-9-24

问题诱发原因

核心是SPA静态资源fallback规则和部署版本不兼容导致：React单页应用默认会在服务器侧配置所有未命中的请求都fallback返回index.html，用于支持前端路由。当你重新部署项目时，旧版本带哈希的chunk文件（比如报错的47.d0f21705.chunk.js）会被新版本的文件替换删除，此时用户浏览器如果还停留在旧版本的页面（静置未刷新的场景），路由跳转时动态加载旧的chunk文件，服务器找不到对应资源就返回了index.html内容，浏览器把HTML当成JS解析就报了执行错误。
辅助触发条件：对index.html设置了不合理的强缓存，导致用户浏览器长期持有旧版本的入口文件，即使刷新也可能拿到旧的资源引用；或者静态资源缓存规则配置错误，带哈希的chunk没有设置长期缓存，请求时触发了fallback规则。
补充现象对应逻辑：持续点击页面时用到的都是已经加载到浏览器缓存里的chunk，不会触发新的资源请求所以正常；刷新地址栏后会拉取最新的index.html，里面引用的都是当前存在的新版本chunk，所以恢复正常。

排查解决步骤

校验服务器配置

检查Nginx、Apache或者你用的托管平台的路由规则，给静态资源路径单独设置规则：所有/static/开头的资源请求，未命中时直接返回404，不要fallback到index.html，避免把HTML内容当成静态资源返回。
示例Nginx配置修改参考：

# 原有通用fallback规则前加静态资源规则
location /static/ {
  expires 1y;
  add_header Cache-Control "public, immutable";
  try_files $uri =404; # 找不到直接返回404
}

# 原有前端路由fallback规则
location / {
  try_files $uri $uri/ /index.html;
}

调整静态资源缓存策略

给带哈希后缀的静态资源（*.chunk.js、*.chunk.css、图片等）设置Cache-Control: public, max-age=31536000, immutable的强缓存，降低重复请求概率。
给入口文件index.html设置Cache-Control: no-cache，强制每次请求都到服务器校验版本，避免用户长期持有旧入口。

优化部署流程
部署新版本时不要立刻删除旧版本的静态资源，至少保留1-7天的历史chunk文件，保证静置未刷新的老用户还能加载到需要的资源。
加运行时异常兜底
给React动态导入的路由组件加错误捕获，加载失败时自动刷新页面拉取最新版本，用户无感知解决问题，示例代码：

// 动态导入路由时加错误捕获
const OrderHistory = React.lazy(() => 
  import('./pages/OrderHistory').catch(() => {
    window.location.reload()
    return { default: () => <div /> }
  })
)

// 也可以全局加ErrorBoundary包裹路由，统一处理资源加载错误
class ErrorBoundary extends React.Component {
  state = { hasError: false }
  static getDerivedStateFromError() { return { hasError: true } }
  componentDidCatch(error) {
    if (error.message.includes('Loading chunk')) {
      window.location.reload()
    }
  }
  render() {
    if (this.state.hasError) return <div />
    return this.props.children
  }
}

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