如何将react-router-dom版本降级到v5.2.0

• 第一步：打开终端进入项目根目录，执行以下命令查看当前已安装的react-router-dom版本，确认当前版本信息：

  # npm 环境
  npm list react-router-dom
  # yarn 环境
  yarn list react-router-dom
  # pnpm 环境
  pnpm list react-router-dom
  

• 第二步：执行指定版本安装命令，直接覆盖现有版本即可；也可以先执行卸载命令npm uninstall react-router-dom（对应包管理器替换为yarn remove/pnpm remove）后再安装：

  # npm 环境
  npm install react-router-dom@5.2.0
  # yarn 环境
  yarn add react-router-dom@5.2.0
  # pnpm 环境
  pnpm add react-router-dom@5.2.0
  

• 第三步：安装完成后再次执行第一步的版本查看命令，确认当前安装的版本为5.2.0即操作完成。

• 语法兼容性调整：react-router v6 和 v5 语法差异较大，降级后需全局替换v6专属语法为v5写法，核心调整点包括：
  • 用Switch组件替换v6的Routes组件
  • 路由配置项用component/render属性替换v6的element属性
  • v5默认是模糊匹配，需要精确匹配的路由必须手动加exact属性
  • 编程式导航用useHistory替换v6的useNavigate，跳转逻辑从navigate('/path')调整为history.push('/path')
  • v5支持withRouter高阶组件注入路由属性，v6已默认移除该API
• 依赖冲突排查：如果项目内其他依赖有依赖高版本react-router-dom的情况，安装时会出现peer依赖警告，需要确认对应依赖是否兼容v5.2.0，必要时同步降级对应依赖版本。
• 版本回滚准备：操作前建议备份package.json以及对应锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），或者提前提交一次git记录，出现异常可快速回滚。
• TypeScript项目适配：如果是TS项目，需要同步降级类型声明包版本到v5对应版本，执行命令：npm install @types/react-router-dom@5，避免出现类型不匹配报错。

内容的提问来源于stack exchange，提问作者SHAIK AKBAR BASHA