React.js点击按钮跳转页面触发push未定义TypeError如何解决

版本不兼容（最常见原因） #

react-router-dom v6 版本已经废弃并移除了 useHistory 钩子，替换为 useNavigate 钩子，直接替换钩子即可解决问题，修改后代码如下：

import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();
  const redirect = () => {
    // 等价于原来的history.push
    navigate('/pathOfMyPage');
  }
  return (
    <div>
      <button onClick={redirect}>Click Here</button>
    </div>
  );
}

组件未纳入路由上下文 #

无论使用v5还是v6版本的react-router-dom，所有调用路由相关钩子的组件，必须是路由容器（BrowserRouter/HashRouter）的后代组件，否则钩子无法获取路由上下文会返回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>
);

其他注意事项 #

• 你原代码中跳转路径末尾多了多余空格 '/pathOfMyPage '，需要删掉空格避免后续路由匹配失败
• 如果你需要继续使用v5版本的react-router-dom，可以指定版本重装依赖：执行命令 npm install react-router-dom@5

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