React使用useHistory触发Invalid Hook call错误，应如何排查解决？

首先明确：你调用useHistory Hook的语法符合规则，本身没有错误，报错是路由上下文缺失导致的。

报错原因 #

react-router-dom v5 提供的useHistory Hook 必须在 <BrowserRouter>（或 <HashRouter>）包裹的组件树内调用，你的Searchbar组件目前不在路由上下文的作用范围内，因此触发无效Hook调用报错。

解决方案 #

1. 打开项目根组件（通常是App.js或入口文件index.js），引入路由容器：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

2. 将包含Searchbar在内的整个应用组件树，以及路由配置都包裹在Router标签内，示例代码如下：

import Searchbar from './Searchbar';
import SearchPage from './SearchPage'; // 你的搜索页组件

function App() {
  return (
    <Router>
      <Searchbar />
      <Switch>
        <Route path="/search" component={SearchPage} />
        {/* 其他页面的路由配置 */}
      </Switch>
    </Router>
  );
}

export default App;

其他排查方向 #

如果完成上述操作后仍然报错，可以尝试以下操作：

• 删除项目下的node_modules文件夹、package-lock.json或yarn.lock文件，重新执行npm install或yarn安装依赖，排除多版本依赖冲突问题
• 确认没有在条件判断、循环、事件回调函数内部调用useHistory，Hook 必须在函数组件的最顶层调用

内容的提问来源于stack exchange，提问作者Dimuthu Lakshan