How can i use NextJS routes with a form in React

Question

this is my app component

const App = () => {
  const classes = useStyles();
  const formik = useFormik({
    initialValues: {
      name: "",
      email: "",
      password: "",
      confirmPassword: ""
    },
    validationSchema: Yup.object({
      name: Yup.string()
        .required("El nombre es obligatirio")
        .min(2, "Muy pequeño")
        .matches(/^[aA-zZ]+$/, "solo letras"),
      email: Yup.string()
        .email("Debe ser un email válido")
        .required("El email es obligatirio"),
      password: Yup.string()
        .required("La contraseña es obligatiria")
        .min(8, "Tu contraseña debe ser mayor a 8 dígitos")
        .oneOf(
          [Yup.ref("confirmPassword")],
          "Las contraseñas deben ser iguales"
        ),
      confirmPassword: Yup.string()
        .required("La contraseña es obligatiria")
        .oneOf([Yup.ref("password")], "Las contraseñas deben ser iguales")
    }),
    onSubmit: (res) => {
      console.log(res);
    }
  });

  return (
    <div>
      <Container className={classes.container}>
        <H1>Login</H1>
        <Form onSubmit={formik.handleSubmit}>
          <TextField
            className={classes.input}
            label="Name"
            autoComplete="off"
            name="name"
            onChange={formik.handleChange}
            error={formik.touched.name && Boolean(formik.errors.name)}
            helperText={formik.touched.name && formik.errors.name}
          />
          <TextField
            className={classes.input}
            label="Email"
            autoComplete="off"
            name="email"
            onChange={formik.handleChange}
            error={formik.touched.email && Boolean(formik.errors.email)}
            helperText={formik.touched.email && formik.errors.email}
          />
          <TextField
            className={classes.input}
            label="Password"
            autoComplete="off"
            name="password"
            onChange={formik.handleChange}
            error={formik.touched.password && Boolean(formik.errors.password)}
            helperText={formik.touched.password && formik.errors.password}
          />
          <TextField
            className={classes.input}
            label="Confirm Password"
            autoComplete="off"
            name="confirmPassword"
            onChange={formik.handleChange}
            error={
              formik.touched.confirmPassword &&
              Boolean(formik.errors.confirmPassword)
            }
            helperText={
              formik.touched.confirmPassword && formik.errors.confirmPassword
            }
          />
          <Link href="/other">
            <Button type="submit" variant="contained" color="secondary">
              Ingresar
            </Button>
          </Link>
        </Form>
      </Container>
    </div>
  );
};

when I validate my form and click the button, I want to go to another component, but I have the error of prefetching is undefined and when I declare prefecth={false} I have another error with push, it's my first time doing this, please help me, I have my component App and Other in the folder 'pages' and index.js in the src folder

score 1 · Answer 1 · answered Nov 16 '20 at 14:58

This usage of a Next <Link> with a <Button type="submit"> is problematic.

Basically Link triggers a navigation when clicking any of it's children, while your Button tries to trigger onSubmit handled by Formik.

As a result, we'll have a race condition.

I would go for next/router useRouter in this case to handle navigation.

import { useRouter } from 'next/router'

export default function Sample() {
  const router = useRouter()
  
  const formik = useFormik({
    initialValues: {
      name: '',
    },
    validationSchema: Yup.object({
      // validation
    }),
    onSubmit: (values) => {
      // doSomething
      router.push('/other')
    },
  })

  return (
    <Container maxWidth="sm">
      <form onSubmit={formik.handleSubmit}>
        <TextField {...formik.getFieldProps('name')} />
        <Button type="submit">Submit</Button>
      </form>
    </Container>
  )
}

How can i use NextJS routes with a form in React

1 Answers1