reactjs - 反应路由器 useHistory 未定义

问题描述

提交保存按钮后，React 会抛出这样的错误 =>无法读取未定义的属性（读取“推送”）

路由和链接位于单独的组件中。代码如下在 AdminEdit.jsx

import { Button, Form } from "antd";
import React, { useEffect } from 'react'
import { useParams,  useHistory } from 'react-router';
import AntdCheckbox from '../../Components/AntdChechBox';
import ButtonPrimary from '../../Components/ButtonPrimary';
import FormContainer from '../../Components/FormContainer';
import InputFormText from '../../Components/InputFormText';
import SecondaryButton from '../../Components/SecondaryButton';
import PageEdit from '../../Layouts/PageTypes/PageEdit';
import BackEndActions from '../../Utils/BackEndActions';
import { notifySuccess } from "../../Utils/Notifications";

const AdminEdit = (props) => {
    let { idAdmin } = useParams();
    const { history } = useHistory()
    const [form] = Form.useForm();
    useEffect(async () => {

        const result = await BackEndActions.getSingleAdmin(idAdmin)
        console.log(result)
        if (result.success) {
            form.setFieldsValue({
                ...result.data
            })
        }
    }, []);

    const onFinish = async (values) => {
        console.log(values, "val")
        const d = new Date();
        const params = {
            createDate: d,
            email: values.email,
            firstName: values.firstName,
            idAdmin: idAdmin,
            lastName: values.lastName,
            password: "",
            phone: values.phone,
            role: 2,
            sendEmail: 0,
            status: 1,
            updateDate: null
        }
        const result = await BackEndActions.saveAdmin(params)
        console.log(result)
        if (result.success) {
            **history.push("/country/list")**
            notifySuccess("success")
        }
    }


    return (
        <PageEdit>
            <FormContainer
                form={form}
                onFinish={onFinish}
                name="EditAdmin"
            >
                <InputFormText
                    label="First Name"
                    name="firstName"
                    required

                />
                <InputFormText
                    label="Last Name"
                    name="lastName"
                />

                <InputFormText
                    label="Phone"
                    name="phone"
                />

                <InputFormText
                    label="Email"
                    name="email"
                />
                <AntdCheckbox />
                <ButtonPrimary
                    label="Save"

                />
                <SecondaryButton
                    label="Cancel"

                />
            </FormContainer>

        </PageEdit>
    );
}

export default AdminEdit;

我什至用 withRouter 包装了组件，但没有任何变化

Routes.jsx 中的代码如下

            <PrivateRoute path="/admin/list"
                render={(props) => {
                    return (
                        <MainLayout title="Admins">
                            <AdminPage />
                        </MainLayout>
                    )
                }}
            />
            <PrivateRoute path="/admin/edit/:idAdmin"
                render={(props) => {
                    return (
                        <MainLayout title="Admin">
                            <AdminEdit {...props} />
                        </MainLayout>
                    )
                }}
            />

Index.js 组件被包裹在 BrowserRouter 中。我做错了什么？

标签： reactjs

只需删除解构

const history = useHistory();

作为旁注，正如您发布的那样，您尝试将组件传递给渲染道具：

<PrivateRoute path="/admin/edit/:idAdmin"
  render={(props) => {
     return (
        <MainLayout title="Admin">
           <AdminEdit {...props} />
         </MainLayout>
     )
  }}
/>

这意味着您将可以访问history、match和location中的 props 对象<AdminEdit />。所以这是实现相同目标的另一种方式。选择一个或另一个。个人感觉，useHistory当需要访问历史的组件不是组件的直接子组件时，使用钩子会更方便Route。

reactjs - 反应路由器 useHistory 未定义

问题描述

解决方案

推荐阅读