升级react-router-dom后出现文件找不到错误的技术求助

核心原因 #

你的react-scripts版本（4.0.3）过于老旧，和react-router-dom v6的模块输出结构不兼容，导致构建时仍在寻找v5及以前版本的ESM路径。另外，未清理的缓存残留也可能导致引用路径未更新。

解决步骤 #

1. 彻底清理缓存与依赖 #

先清除项目残留的旧依赖和缓存，确保重新安装的依赖是干净的：

# 删除node_modules和lock文件（Mac/Linux）
rm -rf node_modules package-lock.json
# 清除npm缓存
npm cache clean --force
# 重新安装依赖
npm install

Windows系统使用以下命令：

Remove-Item -Recurse -Force node_modules, package-lock.json
npm cache clean --force
npm install

2. 升级react-scripts（关键操作） #

react-scripts 4.x版本和react-router-dom v6存在构建逻辑不兼容的问题，建议升级到适配React 17的最新稳定版（React 17最高支持react-scripts 5.0.1）：

npm install --save react-scripts@5.0.1

升级完成后务必重启开发服务器，让新的构建逻辑生效。

3. 检查并修正react-router-dom的导入语法 #

同步更新项目中react-router-dom的导入语句，适配v6的新结构：

• 旧v5写法：import { BrowserRouter, Route, Switch } from 'react-router-dom'
• v6正确写法：import { BrowserRouter, Routes, Route } from 'react-router-dom'
  虽然这不是路径错误的直接原因，但语法不一致可能引发额外构建异常。

4. 排查额外配置问题 #

• 检查package.json中是否有resolutions字段，若存在强制指定react-router-dom版本的配置，确保版本为6.22.3
• 重启IDE/编辑器，避免编辑器缓存旧的文件路径导致误报

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