ReactJS 特定路由下public/assets静态资源文件夹无法加载问题求助

实际问题场景 #

• 项目内所有图片、Logo类静态资源统一存放于public/assets目录下
• 项目配置了多层嵌套的前端路由，已完成全量静态资源引用路径校验，排除单张资源书写错误的问题
• 通过Chrome开发者工具Sources面板观测到明确的加载规律：
  • 2级斜杠层级的路由（如/myApp/sign-out）下，assets文件夹及内部静态资源可正常加载展示
  • 3级及以上层级的深路由（如/myApp/home/accounts）下，assets文件夹整体未被加载，非单张静态资源单独失效

核心根因定位 #

该现象与路由层级强关联的本质是浏览器相对路径的解析规则：

• 若页面中对静态资源使用了相对路径写法，浏览器会自动以当前页面URL的目录层级为基准拼接资源地址
• 在2级斜杠路由/myApp/sign-out下，浏览器解析相对路径的基准目录是/myApp/，拼接出的资源地址如果刚好和构建后的资源存放路径匹配，即可正常加载
• 在3级及以上深路由/myApp/home/accounts下，浏览器解析相对路径的基准目录变为/myApp/home/，同样的引用写法会拼接出错误的资源地址/myApp/home/assets/logo.png，所有资源请求都会返回404，最终在Sources面板中就会观测到assets文件夹完全未加载的现象——这本质是批量资源路径偏移，和之前校验的“单张资源路径书写正确性”并不冲突：校验时通常是基于某一个路由的拼接结果判断路径有效性，没有覆盖路径随路由层级动态偏移的场景。

排查步骤 #

• 打开Chrome开发者工具切换到Network面板，清空现有请求记录后刷新深路由页面，筛选Img/Media类型请求，直接查看每个静态资源的实际请求URL，对比正常路由下的请求地址，即可直观发现路径偏移问题
• 全局检索项目代码中对assets路径的引用写法，排查是否存在两类易引发问题的写法：
  • 不带根斜杠的写法：assets/xxx.png
  • 带当前目录相对前缀的写法：./assets/xxx.png
• 核对项目package.json中的homepage字段配置，确认该值和项目实际部署的子路径完全匹配（如示例中子路径为/myApp，就需要设置"homepage": "/myApp"），避免构建后静态资源公共路径和路由路径混淆

解决方案 #

• 统一修正所有public目录下静态资源的引用规范，强制使用绝对根路径格式引用：
  • 部署在域名根域下的项目，统一写法为/assets/xxx.png
  • 部署在子路径下的项目，结合构建工具注入的公共路径变量（如Vite的import.meta.env.BASE_URL、Create React App的process.env.PUBLIC_URL）拼接路径，保证最终生成的资源地址和实际存放位置完全匹配
• 从项目规范上禁止使用相对路径引用public目录资源，这类写法的解析结果完全依赖当前路由层级，必然会在深路由场景下出现批量加载失效
• 额外排查项：如果使用的是BrowserRouter（HTML5 History模式），需确认服务端的路由重写规则配置正确——部分场景下深路由刷新时，服务端会把静态资源请求也当成前端路由处理返回404，也会连带触发Sources面板中assets文件夹缺失的问题

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