如何在React应用中创建可直接访问的维护暂存页？

问题根因 #

你遇到的重定向是单页应用的默认路由规则导致：React应用部署时默认配置了catch-all fallback规则，所有未匹配到静态资源的请求都会被转发到index.html交给React前端路由处理，访问/maintenance时没有命中静态资源匹配规则，就被React路由识别为无效路径触发首页跳转。

可落地解决方法 #

方案1：直接带后缀访问（最快验证） #

你已经将maintenance.html放在根目录，直接访问mysite.com/maintenance.html即可，Web服务器会优先匹配后缀明确的静态文件，不会触发React路由的回退逻辑。

方案2：适配无后缀访问路径 #

如果需要实现访问/maintenance也能正常打开页面，按以下步骤调整：

• 确认maintenance.html放在React项目的public目录下，打包时该文件会被原封不动输出到构建产物根目录，不参与React编译流程
• 在React路由配置最顶部添加跳转规则，命中/maintenance路径时直接跳转至静态文件，不走前端路由的404逻辑，React Router v6示例：

import { Navigate } from 'react-router-dom'

// 插入到路由规则数组的第一条
{
  path: '/maintenance',
  element: <Navigate to="/maintenance.html" replace />
}

• 本地开发环境验证时，在webpack配置中添加devServer重写规则：

module.exports = {
  // 其他配置
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/maintenance$/, to: '/maintenance.html' }
      ]
    }
  }
}

方案3：AWS部署层配置调整（更适合维护场景） #

针对你使用AWS服务的场景，直接在部署分发层配置优先级最高的规则：

• 若使用CloudFront+S3部署，添加规则：请求路径匹配/maintenance或/maintenance.html时直接返回对应静态文件，不触发默认的index.html回退
• 后续需要开启全站维护时，可直接在分发层添加规则：所有其他路径302重定向到/maintenance.html，维护结束后删除规则即可，无需修改React应用代码，切换效率更高。

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