react-router-dom v5调用useHistory时history is undefined错误如何解决

useHistory 是依赖 react-router 路由上下文工作的Hook，只能在被 <BrowserRouter> 或 <HashRouter> 路由组件包裹的子组件内部调用。你遇到 history is undefined 错误，核心原因就是当前调用 useHistory 的App组件没有被路由组件包裹，无法从上下文获取到history对象。

1. 打开项目入口文件（默认是src/index.js），引入BrowserRouter组件将App组件包裹在内，示例代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

2. 确认调用useHistory的逻辑都写在React组件内部，不要写在组件函数外、普通工具函数等非组件上下文环境中。

注：你当前使用的react-router-dom v5版本useHistory是正常可用的，如果你后续升级到v6及以上版本，该Hook已被移除，需要替换为useNavigate实现路由跳转。

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