Navigate in react using react-router-dom 6

user_14736019 0
Viewed 3959

I am working on a React app where I am trying to navigate from a loginform to the homescreen of my app using an onSubmit function. This is what I have so far. In my formik form im trying to pass the email value when the form gets submitted. After that the user gets routed to '/dashboard' and ends up in '/dashboard/app' where im trying to get the email value logged in the console. I tried logging route.params and route.email but this gives either undefined or errors.

enter image description here

enter image description here

enter image description here

react-router-dom react-navigation formik reactjs
2 Answers

Did you mean to add state to the navigation?

Original:

onSubmit: () => {
          navigate('/dashboard', {replace:true, email: values.email})
}

Changed to (with state):

onSubmit: () => {
          navigate('/dashboard', {replace:true,
                                  state: { 
                                           email:values.email
                                          }
                                   })
}
user_65123960

As far as I understand, you want to redirect with some params. The easiest solution is to use "history push" with the state.

import { useHistory } from "react-router-dom";

const LoginForm = () => {
  const history = useHistory();
  const formik = useFormik({
    onSubmit: () => {
      history.push('/dashboard', {replace: true, email: values.email})
    }
  })
}

In a similar manner access history state by: history.state

user_13247090
Related