I'm playing around with formik and yup in react and I was wondering what is the best way to go about doing a redirect after a successful request?
I tried passing in the history object but it gave me an error saying that it was global:
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;
If you are using React Router, and this is one of the route then you will have history
in props.
I've created a small example, check it out.
https://stackblitz.com/edit/react-formik-form-validation-gge2u7?file=App%2FApp.jsx
window.location.replace('/homepage'); // use this one in handleSubmit .
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With