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",