如何将React应用设置为维护模式

核心实现思路 #

在应用最外层做访问拦截，通过开关判断渲染维护提示页面还是正常业务内容，开关支持前端静态配置、后端动态拉取两种形式，可以根据业务场景灵活选择。

具体实现方案 #

方案1：前端静态配置切换（轻量无服务依赖） #

适合提前通知的计划性维护，不需要后端配合，实现成本极低。

操作步骤

• 第一步：新增维护页面组件，路径参考src/components/Maintenance.jsx，可自定义维护时间、联系渠道等提示信息：

// src/components/Maintenance.jsx
export default function Maintenance() {
  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '20px', backgroundColor: '#f5f5f5' }}>
      <h1>系统正在维护中</h1>
      <p>预计维护时间：2024-XX-XX 00:00 ~ 06:00</p>
      <p>如有紧急问题请联系运维邮箱：xxx@xxx.com</p>
    </div>
  )
}

• 第二步：在根组件（通常是App.jsx或main.jsx）中新增维护模式开关，开关开启时直接返回维护页面：

// src/App.jsx
import { BrowserRouter as Router } from 'react-router-dom'
import Maintenance from './components/Maintenance'
import Routes from './routes'

// 维护模式开关，需要开启维护时改为true即可
const IS_MAINTENANCE = false

function App() {
  if (IS_MAINTENANCE) {
    return <Maintenance />
  }
  return (
    <Router>
      <Routes />
    </Router>
  )
}

export default App

• 第三步：需要开启维护时，将IS_MAINTENANCE的值改为true，重新打包部署上线即可；维护结束后改回false重新部署即可恢复正常访问。

优缺点

• 优点：实现逻辑简单，无额外依赖，稳定性高
• 缺点：切换维护模式需要重新打包部署，不适合紧急维护场景

方案2：后端动态开关控制（无需重新部署） #

适合需要随时切换维护状态的场景，切换全程不需要前端操作，生效速度快。

操作步骤

• 第一步：和后端约定维护状态查询接口，比如GET /api/system/status，返回字段包含isMaintenance（布尔值，是否开启维护）、维护提示文案、预计结束时间等信息。
• 第二步：在根组件中新增状态判断，应用初始化时先拉取系统状态，拉取完成前可加Loading占位避免闪屏：

// src/App.jsx
import { useState, useEffect } from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import Maintenance from './components/Maintenance'
import Routes from './routes'
import Loading from './components/Loading'

function App() {
  const [isLoading, setIsLoading] = useState(true)
  const [isMaintenance, setIsMaintenance] = useState(false)
  const [maintenanceInfo, setMaintenanceInfo] = useState({})

  useEffect(() => {
    const fetchSystemStatus = async () => {
      try {
        const res = await fetch('/api/system/status')
        const data = await res.json()
        setIsMaintenance(data.isMaintenance)
        setMaintenanceInfo(data.info || {})
      } catch (err) {
        // 接口请求异常时默认走正常模式，也可根据业务需要调整为进入维护模式
        setIsMaintenance(false)
      } finally {
        setIsLoading(false)
      }
    }
    fetchSystemStatus()
  }, [])

  if (isLoading) {
    return <Loading />
  }

  if (isMaintenance) {
    return <Maintenance info={maintenanceInfo} />
  }

  return (
    <Router>
      <Routes />
    </Router>
  )
}

export default App

• 第三步：调整维护页面组件，支持传入动态展示信息：

// src/components/Maintenance.jsx
export default function Maintenance({ info = {} }) {
  const { title = '系统正在维护中', content = '请稍后再试', endTime = '' } = info
  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '20px', backgroundColor: '#f5f5f5' }}>
      <h1>{title}</h1>
      <p>{content}</p>
      {endTime && <p>预计恢复时间：{endTime}</p>}
    </div>
  )
}

• 第四步：需要切换维护模式时，后端在配置后台修改维护状态即可，前端用户刷新页面后自动进入/退出维护模式，不需要重新部署前端代码。

优缺点

• 优点：切换速度快，不需要前端打包部署，适配紧急维护场景
• 缺点：依赖后端接口可用性，可根据需要添加降级策略，比如接口异常时默认进入正常模式

可选优化点 #

• 维护模式下可以拦截所有业务接口请求，避免无效请求打到后端，使用axios的话可以通过全局请求拦截器实现：

// src/utils/request.js
import axios from 'axios'

// 可以从全局状态读取动态维护状态，也可以直接使用静态开关
const IS_MAINTENANCE = false 

const service = axios.create()
service.interceptors.request.use(config => {
  if (IS_MAINTENANCE && !config.url.includes('/api/system/status')) {
    return Promise.reject(new Error('系统维护中，暂不支持操作'))
  }
  return config
})

• 如果使用Next.js等服务端渲染框架，可以在服务端层直接返回维护页面，不需要渲染任何业务代码，性能更好
• 维护模式下建议返回503 HTTP状态码，方便搜索引擎识别，避免维护页面被收录

内容的提问来源于stack exchange，提问作者Félicia Eponou