使用useHistory、useLocation钩子触发Invalid hook call错误求助

嘿，我来帮你搞定这个钩子调用错误！先帮你分析下问题根源，再给你直接的解决方案：

问题原因 #

你遇到的错误核心在于路由组件的选择和配置。在React Router v5里，useHistory、useLocation这些路由钩子必须在能提供路由上下文的组件（比如BrowserRouter、HashRouter）包裹的组件树中才能正常工作。而你当前用的Router是React Router的底层组件，它需要手动传入history对象才能提供上下文，否则钩子找不到路由上下文，就会抛出无效调用的错误。

好在你的依赖版本是完全符合要求的：React 16.13.1（满足hooks所需的16.8+版本），React Router 5.1.2（支持这些路由钩子），所以版本不是问题~

解决方案1：改用BrowserRouter（推荐） #

这是最简单的解决方式，BrowserRouter会自动创建并管理history对象，无需手动配置。修改你的App.js：

// App.js
import React from 'react';
// 把Router替换成BrowserRouter，用as Router只是为了保持变量名一致，方便修改
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Display from './Components/Display';

export function App() {
  return (
    <Router>
      <Route path="/" component={Display} />
    </Router>
  );
}

改完之后，你的Display组件里的useHistory和useLocation就能正常获取到路由上下文，错误应该就消失了。

解决方案2：自定义history（仅当有特殊需求时使用） #

如果你需要自定义history的行为（比如监听路由变化、手动跳转等），可以手动创建history对象并传给Router组件：

1. 首先安装兼容的history包（React Router v5依赖history v4版本，v5版本不兼容）：

npm install history@4.x

2. 修改App.js：

// App.js
import React from 'react';
import { Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import Display from './Components/Display';

// 创建自定义的history对象
const history = createBrowserHistory();

export function App() {
  return (
    <Router history={history}>
      <Route path="/" component={Display} />
    </Router>
  );
}

额外检查点（以防其他潜在问题） #

• 确保useHistory/useLocation是在函数组件的顶层调用的，不能在循环、条件判断或者嵌套函数里调用（你的代码里是在顶层，没问题）
• 检查是否重复安装了React或React Router：可以在项目根目录运行npm ls react和npm ls react-router-dom，如果出现多个版本，需要清理重复依赖。

内容的提问来源于stack exchange，提问作者Dharman Arjunan