react-router-dom中useHistory Hook调用push方法报错TypeError问题求助

核心原因1：react-router-dom 版本不兼容 #

react-router-dom v6及以上版本已完全移除useHistory Hook，替换为useNavigate，如果你当前安装的是v6版本，调用useHistory()会直接返回undefined，调用push方法时就会触发该报错。

修复方案： #

替换为v6版本对应的useNavigate实现跳转，代码修改如下：

import React from "react";
import { useNavigate } from "react-router-dom";
// React组件名必须大写开头，否则Hook调用会出现异常
const Test = () => {
  const navigate = useNavigate();

  function buttonPressed() {
    // 等价于之前的history.push
    navigate("/sus");
  }
  return (
    <div>
      <button onClick={() => buttonPressed()}>Brn</button>
    </div>
  );
};

export default Test ;

如果你确实需要使用useHistory，可以将react-router-dom版本回退到v5.x：

npm install react-router-dom@5.3.4

核心原因2：组件未被路由上下文包裹 #

无论你使用的是v5还是v6版本，调用路由相关Hook的组件必须位于BrowserRouter（或HashRouter等路由根组件）的子节点树中，否则无法获取路由上下文，会导致Hook返回undefined。

修复方案： #

在项目入口文件外层包裹路由根组件，示例如下：

// index.js 入口文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

其他可能原因：组件命名不规范 #

你代码中定义的组件名test首字母为小写，React会将其识别为普通HTML标签而非自定义组件，会导致Hook调用规则异常，将组件名改为大写开头的Test即可。

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