Suppose there is a react-router Link ponent.

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 plete use case and solution.

Suppose there is a react-router Link ponent.

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 plete use case and solution.

• javascript
• reactjs
• redux
• react-router
• timeout

Share Improve this question Follow edited Aug 15, 2018 at 9:23 ccd asked Aug 14, 2018 at 8:46 ccdccd 6,9781515 gold badges5555 silver badges110110 bronze badges 5

• 1 Possible duplicate of React-Router: how to wait for an async action before route transition – StackedQ Commented Aug 14, 2018 at 9:13
• Could easily use the setTimeOut() method for resolving this? – ccd Commented Aug 14, 2018 at 9: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 Commented Aug 28, 2018 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 ments to the answers or here so the munity can help you – c-chavez Commented Aug 30, 2018 at 8:28
• The problem is easily solved by setTimeout, this is the link stackoverflow./questions/52004819/…. Thanks again for nice answer. – ccd Commented Aug 30, 2018 at 9:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 bine 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 ponent.

Version:

"react-router": "^4.3.1",
"react-router-dom": "^4.3.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
};