Azure静态Web应用中React嵌套路由(:filter)加载public文件404问题

问题核心 #

你的问题本质是静态资源的相对路径解析错误：

• 访问/development/application/home时，浏览器把config.js解析为/development/application/config.js（正确路径）
• 访问/development/application/transactions/:filter时，浏览器错误地将其解析为/development/application/transactions/config.js，导致404

原因是：React项目中如果使用相对路径引用public目录下的资源，浏览器会根据当前URL的路径层级来拼接资源路径。home是单层路径段，相对路径会回退到上一级；而transactions/:filter是两层路径段，相对路径只会回退到transactions目录下，而非应用根目录。

解决方案 #

方案1：React应用端修改（推荐，根治问题） #

通过Create React App提供的%PUBLIC_URL%占位符，确保所有静态资源引用都是绝对路径：

1. 修改public/index.html中的资源引用：

   <!-- 原来的相对路径 -->
   <script src="config.js"></script>
   <link rel="manifest" href="manifest.json">
   
   <!-- 修改为绝对路径 -->
   <script src="%PUBLIC_URL%/config.js"></script>
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
   

2. 如果组件中需要引用public目录的资源，使用process.env.PUBLIC_URL拼接路径：

   <img src={`${process.env.PUBLIC_URL}/logo.png`} alt="Logo" />
   

这个方法会让所有资源请求直接指向应用的根路径（即/development/application/下的资源），不受路由层级影响。

方案2：Azure静态Web应用配置修改 #

如果不想改动代码，可以通过staticwebapp.config.json添加通用重写规则，拦截错误的资源请求并转发到正确路径：

{
  "routes": [
    // 优先匹配静态资源，将嵌套路由下的资源请求重写到根路径
    {
      "route": "*/*/{filename}.{ext}",
      "rewrite": "/{filename}.{ext}",
      "conditions": {
        "ext": ["js", "json", "css", "png", "jpg", "svg"] // 覆盖所有需要的静态资源后缀
      }
    },
    // SPA核心规则：所有路由请求都指向index.html（保留原有功能）
    {
      "route": "/*",
      "rewrite": "/index.html"
    }
  ]
}

注意规则顺序：静态资源的重写规则必须放在SPA路由规则前面，否则会被优先匹配到index.html。

为什么home/about路由正常？ #

/development/application/home是单层嵌套路由，浏览器解析相对路径时，会自动去掉最后一个路径段（home），所以资源路径会正确指向/development/application/config.js；而transactions/:filter是两层嵌套，浏览器只会去掉最后一个路径段（:filter），导致资源路径落在transactions目录下，这就是两者的差异。

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