React组件点击View按钮报错：Cannot read properties of undefined (reading 'push')

报错Cannot read properties of undefined (reading 'push')的核心原因是你的ListStudentComponent没有接收到history对象，导致调用this.props.history.push()时触发undefined错误。以下是针对不同React Router版本的解决方案：

针对React Router v5及以下版本 #

方案1：用withRouter高阶组件注入路由props #

withRouter会自动把history、location、match这三个路由相关props注入到你的类组件中，修改组件导出方式即可：

import React from 'react';
import { withRouter } from 'react-router-dom';

class ListStudentComponent extends React.Component {
  // 处理View按钮点击逻辑
  handleView = (studentId) => {
    this.props.history.push(`/student/${studentId}`);
  };

  render() {
    return (
      <div>
        {/* 学生列表渲染逻辑 */}
        {this.state.students.map(student => (
          <div key={student.id}>
            <span>{student.name}</span>
            <button onClick={() => this.handleView(student.id)}>View</button>
            {/* Update、Delete按钮 */}
          </div>
        ))}
      </div>
    );
  }
}

// 用withRouter包裹组件后导出
export default withRouter(ListStudentComponent);

方案2：确保组件通过Route组件渲染 #

检查你的App.js路由配置，必须将ListStudentComponent放在Route的component或render属性中，才能自动接收路由props：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ListStudentComponent from './ListStudentComponent';

function App() {
  return (
    <Router>
      <Switch>
        {/* 正确的路由配置方式 */}
        <Route path="/students" component={ListStudentComponent} />
        {/* 或者用render方式传递额外props */}
        {/* <Route path="/students" render={(props) => <ListStudentComponent {...props} />} /> */}
        {/* 其他路由 */}
      </Switch>
    </Router>
  );
}

针对React Router v6版本 #

React Router v6移除了withRouter，可以通过两种方式解决：

方案1：封装高阶组件注入导航方法 #

自己写一个高阶组件，用useNavigate钩子给类组件提供导航能力：

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

// 自定义高阶组件
const withNavigate = (Component) => {
  return (props) => {
    const navigate = useNavigate();
    return <Component {...props} navigate={navigate} />;
  };
};

class ListStudentComponent extends React.Component {
  handleView = (studentId) => {
    // 用navigate替代history.push
    this.props.navigate(`/student/${studentId}`);
  };

  // 渲染逻辑同上
}

export default withNavigate(ListStudentComponent);

方案2：将类组件转为函数组件（推荐） #

React Router v6更推荐使用函数组件，直接用useNavigate钩子即可：

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

function ListStudentComponent() {
  const navigate = useNavigate();

  const handleView = (studentId) => {
    navigate(`/student/${studentId}`);
  };

  return (
    <div>
      {/* 学生列表渲染逻辑 */}
      {students.map(student => (
        <div key={student.id}>
          <span>{student.name}</span>
          <button onClick={() => handleView(student.id)}>View</button>
        </div>
      ))}
    </div>
  );
}

export default ListStudentComponent;

额外检查项 #

• 确保你的整个应用被BrowserRouter（或其他Router组件，如HashRouter）包裹，否则路由相关的props和钩子都无法生效。

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