How to execute a function on Redirect with React JS

Question

I am new to react and have read the docs for synthetic event handlers but still can't figure out how to solve my problem. I have a react app with a router. There is a button for logging in and for logging out. On logout there is an onClick handler like this:

    <a onClick={() => { signOut; this.myFunction(foo); }}><Link to="./login">Log Out</Link></a>

I want to add a similar function on login. But on login I can't use onClick because the content should only be rendered if the credentials are valid. There is an asynchronous call to the database and if the credentials are valid, the following code is executed:

    if (valid) {
        return (
            <Redirect to="/home"  />
        )
    }

How can I call myFunction when it redirects to home? Any help would be appreciated.

Adam Cai · Accepted Answer · 2021-04-01 17:12:32Z

1

You can call myFunction in componentWillUnmount()

componentWillUnmount() {
   myFunction()
}

Or if you are not using class component, then do it in useEffect, like this:

useEffect(() => {
  return () => {
    myFunction()
  };
});

answered Apr 1, 2021 at 17:12

Adam Cai

3971 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to execute a function on Redirect with React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related