在React中混合useNavigate和useHistory

Question

在我现在的工作场所，我要做的项目到目前为止一直在使用useHistory。我知道在较新的版本中通常最好使用 useNavigate。在我的新组件中开始使用 useNavigate 而不更改旧组件以使用 useNavigate 可以吗？

我担心如果我打破约定，组件会出现意想不到的错误，这些错误以后很难跟踪。

Answer 1

我知道在较新的版本中通常最好使用 useNavigate。 开始使用 useNavigate 可以吗？ 我的新组件无需更改旧组件即可使用 使用导航。

React-Router v5 不导出任何

useNavigate

 钩子，React-Router v6 也没有任何 

useHistory

 导出，并且您不能同时安装 

react-router-dom@5

 和 

react-router-dom@6

。但是，您

可以使用react-router-dom-v5-compat向后兼容包在升级迁移期间弥补这一差距。

基本迁移路径类似于以下内容：

1. 确保您的项目运行在 React 16.8 或更高版本上

2. 安装兼容包
   奔跑

   npm install react-router-dom-v5-compat

3. 渲染兼容性路由器

   

4. 逐步升级您想要/需要的内容
   将

   history

    替换为 

   navigate

   。

   

当然

react-router-dom-v5-compat

只是一个临时解决方案，您应该计划尽快完成到React-Router-DOM 6的升级并删除兼容性包。

5. 卸载兼容包

   npm uninstall react-router-dom-v5-compat

6. 卸载

   react-router

    (v5) 和 

   history

   （

   如果有的话）

   npm uninstall react-router history

7. 安装React-Router 6

   npm install react-router-dom@6

8. 删除

   CompatRouter

    并清理导入（

   即来自 react-router-dom 的所有导入）