BitBucket流水线构建后React App路由失效问题求助

以下是针对该问题的具体排查方向和解决方案：

1. 本地运行构建产物的方式是否正确 #

直接双击打开build文件夹内的index.html（file://协议）无法支持React Router的Browser路由模式，这是导致本地测试路由失效的常见原因。正确的本地运行方式是使用支持SPA fallback的本地服务器：

• 安装serve工具：npm install -g serve
• 运行构建产物：serve -s build
  该命令会将所有路由请求重写到index.html，和Azure SWA的路由处理逻辑一致，再测试路由是否正常。

2. 检查构建时的PUBLIC_URL配置 #

React构建时的PUBLIC_URL环境变量会决定路由的基础路径，流水线构建可能因环境差异导致该值异常：

• 对比本地和流水线构建的index.html，查看<head>中的<base href="...">标签内容是否一致（正常应为/）
• 在BitBucket流水线的yarn build步骤前，显式设置PUBLIC_URL：

  - export PUBLIC_URL="/"
  - yarn build
  

• 也可以在项目的package.json中添加"homepage": "/"，强制构建时使用根路径作为基础URL

3. 确认staticwebapp.config.json的生效逻辑 #

虽然两种产物都包含该配置文件，仍需验证流水线环境下配置是否生效：

• 在流水线的swa deploy命令前，添加临时启动本地SWA服务的步骤，测试路由是否正常：

  - swa start "$BITBUCKET_CLONE_DIR/build"
  

• 登录Azure静态Web App控制台，检查navigationFallback规则是否已被正确加载

4. 检查React Router的路由配置 #

确保React Router的BrowserRouter没有错误设置basename属性：

• 若部署的Azure SWA在根路径下，BrowserRouter不应设置basename，或显式设置为"/"
• 示例正确配置：

  import { BrowserRouter } from 'react-router-dom';
  
  <BrowserRouter>
    {/* 你的路由组件 */}
  </BrowserRouter>
  

5. 验证流水线构建的环境一致性 #

本地和流水线的Node.js、Yarn版本差异可能导致构建产物不同：

• 在流水线的script中添加版本检查，确保和本地环境一致：

  - node --version
  - yarn --version
  

• 若版本差异较大，调整流水线的image字段，使用和本地一致的Node.js版本（比如本地用node:18，就将流水线的image改为node:18）

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