Navigate in react using react-router-dom 6

Question

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.

score 6 · Accepted Answer · answered Sep 30 '21 at 11:12

6

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
                                          }
                                   })
}

answered Sep 30 '21 at 11:12

Krushnasinh Jadeja

595
6
18

How do I get to read the state after I have done this – John Sep 30 '21 at 11:20
Try this "props.location.state.email" – Krushnasinh Jadeja Sep 30 '21 at 11:37
I'm getting a props is undefined error. – John Sep 30 '21 at 11:39
yes because you are passing "route" in the bracket of DashboardApp component try with "route.location.state.email" – Krushnasinh Jadeja Sep 30 '21 at 11:42
2

I'm getting a route.location is undefined error. I found out I can use the useLocation hook from react-router-dom to get the state. This seems to fix the problem. – John Sep 30 '21 at 11:49

score 0 · Answer 2 · answered Sep 30 '21 at 10:40

0

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

answered Sep 30 '21 at 10:40

Branislav Lazic

14,388
8
60
85

Im using the useNavigate hook from react-router-dom. Do you know how to implement it with useNavigate? – John Sep 30 '21 at 10:43

Navigate in react using react-router-dom 6

2 Answers2