使用 yup 验证后重定向到下一页

Question

我有一个只需要一个用户输入的表单。我还使用 react formik 作为表单，使用 yup 进行验证。

我希望在验证输入后将用户带到下一页。

验证工作正常，但单击下一页按钮不会转到下一页。

这是我的代码；

.
.
.

const Home = () => {

const navigate = useNavigate()

const initialValues = {
  phoneNumber: ''
}

const onSubmit = values => {
  console.log('form data', values)
  navigate.push("/NextPage")
}

const validationSchema = Yup.object({
phoneNumber: Yup.string()
    .min(11, 'Invalid phone number format!')
    .max(11, 'Invalid phone number format!')
    .required('Please enter your phone number!'),
})


return (
    {/*...*/}

  <Formik 
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={onSubmit}>

    <Form className='phone-input'>
      <Field 
          type='tel' 
          id='phone-input' 
          name='phoneNumber' 
          placeholder='0000-000-0000'
        />
        <ErrorMessage name='phoneNumber'>
          {
            (errorMsg) => <div className='error'>{errorMsg}</div>
          }
        </ErrorMessage>
        <button type='submit' id="phoneBtn"  onClick={onSubmit}>Next Page</button>
          
    </Form>
      
    </Formik>
  
    </div> 
    )
    }

    export default Home

Answer 1

我认为您不需要执行 .push() 来导航。只需使用-

navigate("/NextPage")

使用 yup 验证后重定向到下一页

Redirect to next page after validating with yup

forms

react-router-dom

yup

formik