react部署更新后旧 chunk 404、用户浏览器缓存旧页面的问题与(路由跳转使用相对路径而不是绝对路径的关系）分析，并提供解决方案

react部署更新后旧 chunk 404、用户浏览器缓存旧页面的问题与(路由跳转使用相对路径而不是绝对路径的关系）

问题原因

相对路径：useNavigate('.../hom')

绝对路径：useNavigate('/app/hom')

1. .../hom 相对路径 = 不刷新 HTML = 用旧缓存 = 旧 chunk 404
2. /app/hom 绝对路径 = 重新获取最新 index.html = 无缓存问题
3. 生产环境 React/Vue 路由永远不要用相对路径

解决方案（结合项目情况更改优化）

1、生产环境 React/Vue 路由永远不要用相对路径，替换项目里的相对路径跳转

2、识别子组件渲染时是否抛出异常，进行window.location.reload()页面刷新（可优化无感刷新）

import { useRouteError, isRouteErrorResponse } from "react-router-dom"

const error = useRouteError()

// chunk 加载失败（部署更新导致旧文件 404）

const isChunkError = isRouteErrorResponse(error) && error.status === 0

if (isChunkError) {

window.location.reload()

return null

}

或 添加异常页面增加刷新按钮window.location.reload()页面刷新

path: '/' + errorElement: <ErrorBounds>

errorElement 的作用是：当 / 及其所有子路由（children）在渲染过程中抛出异常时（如 JS 运行时错误、throw 的错误等），React Router 会捕获错误并渲染 替代原本的内容。

它是一个错误边界（Error Boundary），处理的是"渲染过程中发生的意外错误"。

结论先行

有直接关系！而且是核心关联点

你遇到的旧 chunk 404、浏览器缓存旧页面 问题，90% 就是因为用了相对路径路由跳转（../hom） ，和绝对路径（/app/hom）的行为差异直接导致了这个bug。

我给你把原理、问题、解决方案一次性讲透，你一看就懂。

---

一、先搞懂：相对路径 vs 绝对路径 在路由里的区别

1. 绝对路径 /app/hom

• 从根路径开始跳转
• 无论当前页面在哪，跳转后地址都是干净的：域名/app/hom
• 浏览器会重新解析入口 HTML（index.html） ，拿到最新的资源清单

2. 相对路径 ../hom

• 基于当前 URL 做拼接跳转
• 跳转后地址会保留历史路径层级
• 关键问题：浏览器不会重新请求最新的 index.html，继续使用旧缓存页面 + 旧 chunk 资源

---

二、为什么相对路径会导致「旧 chunk 404」？

真实场景（部署更新后）

1. 用户浏览器缓存了旧版本 index.html
2. 用户在旧页面里用 useNavigate('../hom') 跳转
3. 因为是相对路径 ，浏览器不会重新请求服务器的新 index.html
4. 继续用旧的 webpack chunk 哈希值去请求资源
5. 部署更新后，旧 chunk 已经被删除 → 404

绝对路径为什么不会？

• /app/hom 强制浏览器从根路径重新加载
• 一定会请求最新的 index.html
• 拿到最新的 chunk 地址 → 不会 404

---

三、为什么相对路径会导致「用户一直看到旧页面」？

因为：

• 相对路径跳转 = 前端路由内部跳转，不刷新页面，不请求新 HTML
• 浏览器缓存的旧 HTML 永远不更新
• 用户不手动强制刷新，就永远停留在旧版本

这是生产环境最常见的缓存坑。

---

四、你现在的代码问题

// ❌ 错误：相对路径，会触发缓存 + 旧chunk 404
useNavigate('../hom')

// ✅ 正确：绝对路径，强制从根路由加载，无缓存问题
useNavigate('/app/hom')

---

五、最终解决方案（一步到位）

1. 所有路由跳转必须使用绝对路径

把项目里所有：

• ../xxx
• ./xxx
• ../../xxx

全部改成以 / 开头的绝对路径：

useNavigate('/app/hom')

2. 路由配置统一用绝对路径

{
  path: '/app/hom',  // 绝对路径
  element: <Home />
}

3. 额外保险：给 index.html 禁用强缓存（nginx 示例）

location / {
  add_header Cache-Control "no-store";  # 不缓存 index.html
  try_files $uri $uri/ /index.html;
}

---

六、总结（最关键的3句话）

1. ../hom 相对路径 = 不刷新 HTML = 用旧缓存 = 旧chunk 404
2. /app/hom 绝对路径 = 重新获取最新 index.html = 无缓存问题
3. 生产环境 React/Vue 路由永远不要用相对路径

---

总结

你遇到的旧 chunk 404、浏览器缓存旧页面 ，根本原因就是使用了相对路径路由 。

只要把所有跳转改成绝对路径，问题立刻解决。