在 formik 中用 yup react 重定向?
redirect in formik with yup react?
我正在玩弄 formik 和 yup 的反应,我想知道在成功请求后进行重定向的最佳方法是什么?
我尝试传入历史对象,但它给了我一个错误,说它是全局的:
const SignUp = withFormik({
mapPropsToValues({
username,
email,
password,
passwordConfirm,
registerUser
}) {
return {
username: username || '',
email: email || '',
password: password || '',
passwordConfirm: passwordConfirm || ''
};
},
validationSchema: Yup.object().shape({
username: Yup.string()
.required('must have username')
.min(5, 'username must be 5 characters long'),
email: Yup.string()
.email('Please enter a valid email')
.required('Email is required'),
password: Yup.string().required('No password provided.'),
passwordConfirmation: Yup.string().oneOf(
[Yup.ref('password'), null],
'Passwords must match'
)
}),
handleSubmit(values, { resetForm }) {
const user = {
username: values.username,
email: values.email,
password: values.password
};
//registerUser(user)
//re direct here ?
resetForm();
}
})(SignUpPage);
export default SignUp;
如果您正在使用 React Router,并且这是路线之一,那么您将在道具中获得 history
。
我创建了一个小示例,请查看。
https://stackblitz.com/edit/react-formik-form-validation-gge2u7?file=App%2FApp.jsx
window.location.replace('/主页'); // 在 handleSubmit 中使用这个。
我正在玩弄 formik 和 yup 的反应,我想知道在成功请求后进行重定向的最佳方法是什么?
我尝试传入历史对象,但它给了我一个错误,说它是全局的:
const SignUp = withFormik({
mapPropsToValues({
username,
email,
password,
passwordConfirm,
registerUser
}) {
return {
username: username || '',
email: email || '',
password: password || '',
passwordConfirm: passwordConfirm || ''
};
},
validationSchema: Yup.object().shape({
username: Yup.string()
.required('must have username')
.min(5, 'username must be 5 characters long'),
email: Yup.string()
.email('Please enter a valid email')
.required('Email is required'),
password: Yup.string().required('No password provided.'),
passwordConfirmation: Yup.string().oneOf(
[Yup.ref('password'), null],
'Passwords must match'
)
}),
handleSubmit(values, { resetForm }) {
const user = {
username: values.username,
email: values.email,
password: values.password
};
//registerUser(user)
//re direct here ?
resetForm();
}
})(SignUpPage);
export default SignUp;
如果您正在使用 React Router,并且这是路线之一,那么您将在道具中获得 history
。
我创建了一个小示例,请查看。
https://stackblitz.com/edit/react-formik-form-validation-gge2u7?file=App%2FApp.jsx
window.location.replace('/主页'); // 在 handleSubmit 中使用这个。