Mac本地React项目localhost路由加载旧内容问题求助

这种特定路由刷新出旧内容的问题确实挺棘手的——既然常规缓存清理没用，咱们试试下面这些针对性的方案：

1. 彻底清理项目依赖与开发服务器缓存 #

有时候create-react-app的本地依赖缓存或者开发服务器内存缓存会残留旧内容，试试彻底重置：

• 先删除依赖文件并清理npm缓存：

  rm -rf node_modules package-lock.json yarn.lock
  npm cache clean --force
  npm install
  

• 重启开发服务器时禁用缓存：

  npm start -- --no-cache
  

• 完全关闭所有浏览器窗口和终端里的开发服务器进程，再重新启动，避免内存中的缓存残留。

2. 排查端口占用与hosts/代理设置 #

• 检查端口占用：3000端口可能被旧项目进程偷偷占用，用以下命令查看并清理：

  # 查看3000端口的进程
  lsof -i :3000
  # 杀掉对应进程（替换<PID>为查到的进程ID）
  kill -9 <PID>
  

  也可以换个端口启动项目测试：

  PORT=3001 npm start
  

• 检查hosts文件：打开Mac上的/etc/hosts文件，确认没有把localhost:3000指向其他奇怪的地址，确保只有127.0.0.1 localhost这类正常条目。
• 关闭代理/VPN：临时禁用浏览器代理或系统VPN，排查是否是网络转发导致请求到了旧内容。

3. 清除残留的Service Worker #

create-react-app的Service Worker可能会在本地缓存旧资源，即使你清理了浏览器缓存：

• 打开浏览器开发者工具（F12），切换到Application标签，找到Service Workers选项，查看是否有当前项目的Worker在运行，点击Unregister删除它。
• 也可以临时注释掉项目src/index.js中的Service Worker注册代码，验证是否是它导致的问题：

  // serviceWorkerRegistration.register();
  

4. 检查路由配置与静态文件残留 #

• 核对路由规则：确认reach/router的配置中没有重复或错误的路由规则，比如是否有旧的路由规则意外匹配了/test/stuff，指向了已删除的组件。
• 清理public目录：检查项目public目录下是否存在旧的静态文件或目录（比如public/test），这些文件可能被开发服务器直接返回，导致刷新时加载旧内容，删除无关的静态资源后重启服务器。

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