升级react-router版本时两个react-router-dom依赖该如何处理

升级到React Router v6及以上版本时，你配置里的两个react-router-dom相关依赖都需要移除，不能只删除其中一个。

现有依赖说明 #

你当前package.json里的两个依赖是v5版本的标准配置，各自作用如下：

• dependencies下的react-router-dom@5.3.0：路由功能的核心运行时代码包
• devDependencies下的@types/react-router-dom@5.3.3：v5版本配套的TypeScript类型声明包，v5版本本身没有内置TS类型，因此需要单独安装社区维护的类型定义

正确升级操作 #

1. 先卸载旧版本的两个依赖，npm环境执行以下命令即可，使用yarn/pnpm的话替换为对应包管理器的卸载指令：

npm uninstall react-router-dom @types/react-router-dom

2. 安装最新版本的react-router-dom：

npm install react-router-dom@latest

注意事项 #

• v6版本开始react-router-dom包本身已经内置了完整的TypeScript类型定义，不需要额外安装任何@types/开头的配套类型包。如果残留旧的@types/react-router-dom，会和v6内置的类型产生冲突，引发TS类型校验报错，比如API属性不存在、参数类型不匹配等异常。
• v5到v6存在较多不兼容的API变更，安装完新版本后需要同步调整业务代码：比如将Switch组件替换为Routes、路由配置的component/render属性替换为element、useHistory钩子替换为useNavigate、调整嵌套路由的配置逻辑等，修改完成后项目才能正常编译运行。

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