React-router v5.3使用history.push跳转报错：Cannot read 'push' of undefined

错误原因及修复步骤 #

1. 确保组件处于Router上下文范围内 #

useHistory钩子仅能在被React Router的Router组件（如BrowserRouter）包裹的组件中正常工作。如果你的Loginpage没有被Router包裹，useHistory()会返回undefined，调用history.push自然会触发报错。

修改入口文件（示例：App.js）：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Loginpage from './Loginpage';
import JobFindPage from './components/JobFindPage';
import CreateJobPage from './components/CreateJobPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Loginpage} />
        <Route path="/job-find" component={JobFindPage} />
        <Route path="/create-job" component={CreateJobPage} />
      </Switch>
    </Router>
  );
}

export default App;

2. 修正history.push的跳转路径 #

你代码中history.push('./components/JobFindPage')是错误用法——这里需要填写路由配置中定义的路径，而非文件系统的相对路径。按照上面的路由配置示例，修改Loginpage内的跳转逻辑：

修改Loginpage的handleFormSubmit函数：

const handleFormSubmit = (event) => {
    event.preventDefault();

    if (username === 'employee' && password === 'emp123'){
        history.push('/job-find'); // 替换为路由配置的路径
        alert('hii');
    }
    else  if (username === 'employer' && password === 'emr123'){
        history.push('/create-job'); // 替换为路由配置的路径
        alert('hii');
    }
    else{
        alert ('wrong username or password')
    }
}

3. 可选：验证React Router版本一致性 #

确保项目安装的是react-router-dom v5.3.x版本，避免版本不兼容问题：

npm list react-router-dom

若版本不符，重新安装指定版本：

npm install react-router-dom@5.3.0

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