无法读取 onClick 函数中未定义的属性(读取"push")

Question

我在这段代码中得到错误，而使用一个onclick函数路由在它我不明白如何修复它。

import React from "react";
import { Row, Col, Container, Button, ButtonGroup } from "react-bootstrap";
import { Routes, Route } from "react-router-dom";
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 }) => {

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={() => history.push("/admin/userlist")}>
All Users
</Button>
<Button onClick={() => history.push("/admin/pizzalist")}>
All Pizzas
</Button>
<Button onClick={() => history.push("/admin/addnewpizza")}>
Add New Pizza
</Button>
<Button onClick={() => history.push("/admin/orderlist")}>
All Orders
</Button>
</ButtonGroup>
</Col>
<Col md={10}>
<Routes>
<Route path="/admin" component={Userlist} exact />
<Route path="/admin/userlist" component={Userlist} exact />              
<Route path="/admin/pizzalist" component={Pizzaslist} exact />
<Route path="/admin/addnewpizza" component={AddNewPizza} exact />
<Route path="/admin/orderlist" component={OrderList} exact />
</Routes>
</Col>
</Row>
</Container>
</>
);
};
export default AdminScreen;

Answer 1

如果您使用的是Routes组件，那么您使用的是react-router-dom@6，这意味着没有history对象可引用，没有history作为prop传递给此AdminScreen组件，并且Route组件使用旧的v5 api，需要更新。

1. 使用useNavigate钩子访问点击处理程序中使用的navigate函数。
2. 更新Route组件，将element道具上的路由内容渲染为React.ReactNode，例如JSX。

代码

import React from "react";
import { Row, Col, Container, Button, ButtonGroup } from "react-bootstrap";
import {
Routes,
Route,
useNavigate // <-- import hook
} from "react-router-dom";
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 = () => {
const navigate = useNavigate(); // <-- call hook
return (
<Container>
<Row>
<h1 className="text-center bg-dark text-light p-2">Admin Panel</h1>

将history.push替换为navigate，以实现PUSH导航动作。

<Col md={2}>
<ButtonGroup vertical style={{ minHeight: "400px" }}>
<Button onClick={() => navigate("/admin/userlist")}>
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>

更新Route组件以使用正确的道具

<Col md={10}>
<Routes>
<Route path="/admin" element={<Userlist />} />
<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;