React Router@3.x 升级到 @6.x 的实战

一、概述

目前公司产品有关 react 的工具版本普遍较低，其中react router版本为 3.x(是的，没有看错，3.x 的版本，4年前的版本)。而最新的 react router 已经到了 6.x 版本。

为了能够跟上路由的脚步，也为了使用 router 相关的 hooks 函数，一次必不可少的升级由此到来！由于 react-touter 6.x 需要依赖react 和 react-dom ，所以我们的项目需要满足以下条件：

"peerDependencies": {"react": ">=16.8","react-dom": ">=16.8"
}

目前，react router最新的版本是6.14.0，所以确定使用 react-router-dom: 6.14.0作为目标升级版本。是的，跳过了v4/v5 版本，直接上 v6 一步到位。

二、React Router 升级

2.1 组件引用

在 v6 版本，react router的包可以分为了 3 个包：

• react-router : 核心包，只提供核心的路由和 hook 函数，不会直接使用
• react-router-dom ：供浏览器/Web 应用使用的 API。依赖于 react-router， 同时将 react-router 的 API 重新暴露出来
• react