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.
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",
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
};
doSomthing() code to see if I'm able to help you.