我在维护页面和常规内容之间手动添加了一个切换按钮，而无需从外部源获取。它在本地和Azure Web应用程序中工作。

产品代码：

• src/components/App.js：*

import React, { useState } from 'react';
import MaintenancePage from './MaintenancePage';

const App = () => {
  const [isMaintenancePageEnabled, setIsMaintenancePageEnabled] = useState(false);

  const toggleMaintenancePage = () => {
    setIsMaintenancePageEnabled(!isMaintenancePageEnabled);
  };

  return (
    <div>
      <button onClick={toggleMaintenancePage}>
        Toggle Maintenance Page ({isMaintenancePageEnabled ? 'Enabled' : 'Disabled'})
      </button>
      {isMaintenancePageEnabled ? (
        <MaintenancePage />
      ) : (
        <div>
          <h1>Welcome to the App!</h1>
        </div>
      )}
    </div>
  );
};

export default App;

字符串

src/components/maintenancePage.js：

import React from 'react';

const MaintenancePage = () => {
  return (
    <div>
      <h1>Maintenance Page</h1>
      <p>Sorry, we are currently undergoing maintenance. Please check back later.</p>
    </div>
  );
};

export default MaintenancePage;

型

输出：

我能够使用下面的命令成功地构建和运行react应用程序，

npm run build
npm start

我在端口3000得到如下输出，然后点击切换维护页面（禁用），得到如下维护页面：

的
我可以启用和禁用维护页面使用下面的切换按钮如下，

的
然后，我将build文件夹部署到Azure Web应用，如下所示：
x1c4d 1x的
我可以使用下面Azure Web应用程序中的切换按钮启用和禁用维护页面。

型

型

使用部署插槽实现。步骤如下：

• 创建新部署槽并部署维护页。
• 将部署插槽流量百分比更改为100%，无论何时关闭

需要时间。

的数据