CODEWITHSUNDEEP
reactjsreact-router
Goteii
Goteii

Reputation: 170

How can I pass data to a separate component which is loaded by a redirect?

I want to let users of my website see their basic information on a Dashboard component after they log in.

So far I've figured out that I have to assign the result of the axios log in request to a variable and then pass it. The question is: How can I pass that? From what I know, I can only pass data down from parent to child and the Dashboard is a completely separate component which gets loaded by calling props.history.push.

So far my request looks like:

const handleSubmitLogin = async (event: any) => {
    event.preventDefault();
    const isValid = validateLogin();
    if (isValid) {
      axios
        .post(baseUrl + "User/SignIn", {
          username: formDetails.loginUsername,
          password: formDetails.loginPassword,
        })
        .then((res) => {
          localStorage.setItem("cool-jwt", res.data.result.tokenString);
          res = res.data.result;
          props.history.push("/dashboard");
          console.log(res);
        return res;
        })
        .catch((e) => {
          console.log(e);
        });

      setFormDetails(INIT_STATE);
    }
};

After a successful login, the user gets redirected to his dashboard where I want to access the res data and let him see his customerID, username and email.

Upvotes: 0

Views: 32

Answers (1)

Linda Paiste
Linda Paiste

Reputation: 42238

props.history.push accepts a second argument state. You can use this argument to pass the data which you want to be able to access from the Dashboard component.

.then((res) => {
    localStorage.setItem("cool-jwt", res.data.result.tokenString);
    const result = res.data.result;
    props.history.push("/dashboard", {
        customerId: result.id,
        username: result.username, 
        email: result.email,
    });

Inside the Dashboard component, access the state through the location via props.location.state or the useLocation hook.

const {state} = useLocation();

Upvotes: 2

Related Questions