React路由onClick函数报错：Cannot read properties of undefined (reading 'push')

你遇到的问题是因为使用了react-router-dom v6版本，这个版本彻底移除了组件props中的history对象，同时Route组件的语法也发生了变化，以下是两种可行的修复方案：

方案一：使用useNavigate钩子（推荐） #

react-router-dom v6提供了useNavigate钩子来替代原本的history.push功能，步骤如下：

1. 导入useNavigate钩子
2. 在组件内初始化导航函数
3. 替换history.push为navigate调用
4. 修正Route组件的语法（v6不再支持component属性，改用element）

修改后的完整代码：

import React from "react";
import { Row, Col, Container, Button, ButtonGroup } from "react-bootstrap";
import { Routes, Route, useNavigate } from "react-router-dom"; // 新增useNavigate导入
import OrderList from "../components/Admin/Orderlist";
import Pizzaslist from "../components/Admin/Pizzaslist";
import Userlist from "../components/Admin/Userlist";
import AddNewPizza from "../components/Admin/AddNewPizza"

const AdminScreen = () => { // 移除history解构
  const navigate = useNavigate(); // 初始化导航函数
 
  return (
    <>
      <Container>
        <Row>
          <h1 className="text-center bg-dark text-light p-2">Admin Panel</h1>
          <Col md={2}>
            <ButtonGroup vertical style={{ minHeight: "400px" }}>
              <Button onClick={() => navigate("/admin/userlist")}> {/* 替换为navigate */}
                All Users
              </Button>
              <Button onClick={() => navigate("/admin/pizzalist")}>
                All Pizzas
              </Button>
              <Button onClick={() => navigate("/admin/addnewpizza")}>
                Add New Pizza
              </Button>
              <Button onClick={() => navigate("/admin/orderlist")}>
                All Orders
              </Button>
            </ButtonGroup>
          </Col>
          <Col md={10}>
            <Routes>
              <Route path="/admin" element={<Userlist />} /> {/* 改用element属性 */}
              <Route path="/admin/userlist" element={<Userlist />} />
              <Route path="/admin/pizzalist" element={<Pizzaslist />} />
              <Route path="/admin/addnewpizza" element={<AddNewPizza />} />
              <Route path="/admin/orderlist" element={<OrderList />} />
            </Routes>
          </Col>
        </Row>
      </Container>
    </>
  );
};

export default AdminScreen;

方案二：用Link组件结合Button样式 #

如果你不想手动处理点击事件，可以直接用react-router-dom的Link组件，配合react-bootstrap的Button样式，这种方式更符合路由组件的设计规范：

修改后的按钮部分代码：

import { Routes, Route, Link } from "react-router-dom"; // 导入Link

// ... 其他代码不变

<ButtonGroup vertical style={{ minHeight: "400px" }}>
  <Button as={Link} to="/admin/userlist"> {/* 使用as属性将Button转为Link */}
    All Users
  </Button>
  <Button as={Link} to="/admin/pizzalist">
    All Pizzas
  </Button>
  <Button as={Link} to="/admin/addnewpizza">
    Add New Pizza
  </Button>
  <Button as={Link} to="/admin/orderlist">
    All Orders
  </Button>
</ButtonGroup>

同时记得把Route组件的component改成element，和方案一的修改一致。

关键说明 #

• react-router-dom v6移除了withRouter高阶组件和组件props中的history/location/match，统一使用钩子（useNavigate/useLocation/useParams）来获取路由相关功能
• Route组件的component/render/children属性被统一替换为element，需要传入JSX元素而非组件引用

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