0

Suppose there is a react-router Link component.

class MyLink extends Component {
  handleOnClick = () => {
    doSomething();
    // Expecting to have a timeout before routing to another route
  };

  render() {
    return (
        <StyledLink
          to="/stock"
          onClick={this.handleOnClick}
        />
    );
  }
}

How to set a timeout after onClick event before routing the history path?

EDIT

I have reposted another issue with a complete use case and solution.

ccd
  • 5,788
  • 10
  • 46
  • 96
  • 1
    Possible duplicate of [React-Router: how to wait for an async action before route transition](https://stackoverflow.com/questions/37849933/react-router-how-to-wait-for-an-async-action-before-route-transition) – StackedQ Aug 14 '18 at 09:13
  • Could easily use the setTimeOut() method for resolving this? – ccd Aug 14 '18 at 09:21
  • Do you want to redirect immediately after doSomething() finishes execution? or do you want to redirect after a given number of seconds? Your link to the other issue is broken, please fix. – c-chavez Aug 28 '18 at 15:39
  • @yuanlai remember to mark the answer that was most helpful to you as the correct answer. If your issue has not been resolved please add comments to the answers or here so the community can help you – c-chavez Aug 30 '18 at 08:28
  • The problem is easily solved by setTimeout, this is the link https://stackoverflow.com/questions/52004819/withrouter-can-not-work-in-componentdidupdate. Thanks again for nice answer. – ccd Aug 30 '18 at 09:50

2 Answers2

3

It depends on what you want to do and what doSomething() does.

If your doSomething() function is not async:

handleOnClick = (e) => {
    e.preventDefault(); //prevent transition
    doSomething();

    // redirect after 1 second
    window.setTimeout(() => {
       this.props.history.push(this.props.match.path);
    }, 1000)
};

If doSomething() is async, then you can wait for it to finish and then redirect:

handleOnClick = async (e) => {
    e.preventDefault(); //prevent transition
    await doSomething(); // wait until it finishes

    // redirect
    this.props.history.push(this.props.match.path);
};

or combine both:

handleOnClick = async (e) => {
    e.preventDefault(); //prevent transition
    await doSomething(); // wait until it finishes

    // redirect 1 second after doSomething() finishes.
    window.setTimeout(() => {
       this.props.history.push(this.props.match.path);
    }, 1000)
};

Remember to handle any errors if the function is async.

this.props.match.path will get the path in the "to" property of Link.

Also, don't forget to use withRouter in your component.

Version:

"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
c-chavez
  • 7,237
  • 5
  • 35
  • 49
1

Well you could preventing the link from navigating app but you gonna navigate it later programmatically afterwards:

handleOnClick = (e) => {
    e.preventDefault(); //prevent transition
    doSomething();

    // and after timeout
    window.setTimeout(() => {
       this.props.history.push('/stock')
       // history is available by design in this.props when using react-router
    }, 3000) // 3000 means 3 seconds
};
StackedQ
  • 3,999
  • 1
  • 27
  • 41