未捕获的错误：useSubmitImpl 必须在数据路由器内使用

Question

我正在使用以下版本，

“福米克”：“^2.2.9”

“反应”：“^18.2.0”

"react-dom": "^18.2.0"

“react-router-dom”：“^6.4.0”

“反应脚本”：“5.0.1”

“打字稿”：“^4.7.4”

“网络生命”：“^2.1.4”

“@types/react-router-dom”：“^5.3.3”

下面是我的代码

import { Field, Formik } from "formik";
import { Link } from "react-router-dom";
import { Form } from "react-router-dom";
import Button from "../movies/Button";

export default function CreateGenre(){
    //const navigate = useNavigate();
    return (
        <>
            <h3>Create Genre</h3>
            <Formik 
                initialValues={{
                    name: ''
                }}
                onSubmit={value=>{
                    console.log(value);
                }}
                >
                <Form>
                    <div className="form-group">
                        <label htmlFor="name" >Name</label>
                        <Field name="name" className="form-control" />
                    </div>
                    <Button type='submit'>Save changes</Button>
                    <Link className="button button-secondary" to="/genres">Cancel</Link> 
                </Form>   
            </Formik>
        </>
    );
}

并在运行时出现错误。

Answer 1

您的表单组件未正确导入。正确导入的示例如下所示。

import { Field, Formik,Form } from "formik"; // <== this correct import
import { Link } from "react-router-dom";
import Button from "../movies/Button";