GitHub Actions部署React到Azure Web App报useRoutes上下文错误

该报错与GitHub Actions特殊配置缺失无关，你贴出的业务代码本身写法正确：<App />已经被<BrowserRouter>包裹，正常生产构建逻辑不会触发该错误。

报错触发的核心原因是CI环境执行构建流程时会默认运行全量单元测试，而你的测试用例中渲染路由相关组件时未包裹Router上下文：

• 你本地执行npm start、手动执行npm run build时不会自动触发全量单元测试，因此不会暴露问题
• GitHub Actions部署到Azure Web App时，默认以CI模式运行，会自动执行npm test跑全量测试用例。如果你的测试文件（比如脚手架自动生成的App.test.tsx）中直接渲染了<App />或者其他用到路由API的组件，没有套<BrowserRouter>/<MemoryRouter>提供路由上下文，运行测试时就会抛出useRoutes() may be used only in the context of a <Router> component错误，直接中断构建流程。
• 小概率原因是CI环境依赖安装异常：如果npm install过程中出现版本冲突、peer依赖报错，导致存在多份react-router-dom副本，也可能触发该问题。

• 优先修复测试用例：找到所有涉及路由组件的测试文件，渲染组件时增加Router包裹，示例代码如下：

import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import App from './App';

test('render app correctly', () => {
  render(
    <MemoryRouter>
      <App />
    </MemoryRouter>
  );
  // 原有测试断言逻辑
});

• 本地验证：执行CI=true npm run build，如果能复现和CI环境一致的报错，修复测试用例后重新执行命令验证通过即可。
• 若暂时不需要在CI流程中跑单元测试，可以在GitHub Actions工作流配置中，为构建步骤添加环境变量CI=false，跳过测试执行阶段直接构建。
• 若排查后确认不是测试问题，可以将CI流程中的依赖安装命令替换为npm ci，严格按照lock文件安装依赖，排除依赖版本不一致、安装损坏的问题。

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