React使用useHistory出现Invalid hook call错误如何解决？

问题排查及解决方案 #

1. 优先检查react-router-dom版本 #

useHistory 是react-router-dom v5版本提供的API，如果你安装的是v6及以上版本，该API已被移除，自然会触发调用错误，替换方案如下：

• 把 useHistory 导入替换为 useNavigate
• 代码调整为：

import { useNavigate } from "react-router-dom"

function Home() {
  const navigate = useNavigate();
  // 跳转逻辑修改为
  navigate("/LoginScreen")
  // 其余代码保持不变
}

你可以在项目根目录执行命令npm list react-router-dom确认当前安装的版本号。

2. 确认Home组件被路由容器包裹 #

所有使用react-router相关hook的组件，必须在BrowserRouter（或HashRouter）的子组件树内才能正常调用。你需要检查项目入口文件（通常是index.js）的渲染逻辑，是否是类似如下写法：

import { BrowserRouter } from 'react-router-dom'
import Home from './Home'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <Home />
  </BrowserRouter>
)

如果直接渲染Home组件没有外层包裹路由容器，也会触发hook调用错误。

3. 其余兼容检查 #

如果你确认使用的是react-router-dom v5版本，还可以检查两项配置：

• 项目安装的react、react-dom版本都高于16.8.0，只有16.8以上版本才支持Hook特性
• 项目不存在多个react副本，可以执行npm list react排查，如果有多个版本统一对齐即可

额外代码优化提示 #

你的代码里还有两处需要修正的写法问题：

• React的点击事件是驼峰命名，需要把onclick改成onClick
• 组件的return内不需要写完整的<html>、<head>、<body>标签，这些属于项目入口的全局结构，组件内只需要写业务对应的DOM片段即可

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