一、概述
目前公司产品有关 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