React - how to trigger preventDefault() before the synthetic event is recycled?

Question

I have the following function within a React component which is run when a link is clicked:

onClick(e, { name }) {
    e.stopPropagation();

    const doIt = await checkSomething();

    if (doIt) {
        e.preventDefault();
        doSomethingElse();
    }
}

Problem is that by the time e.preventDefault() is reached the synthetic event is recycled. So, how do I tell the browser not to follow the link if it is clicked, when some logic is needed to calculate this decision and before the synthetic event is recycled?

Answer 1

One way to handle this would be to use preventDefault and when the action is complete and you need to route, call the Routing logic yourself using history.push()

onClick(e, { name }) {
    e.stopPropagation();
    e.preventDefault();
    const doIt = await checkSomething();

    if (doIt) {
        doSomethingElse();
    } else {
        this.props.history.push('/pathToRoute');
    }
}

Check this answer on how to Programmatically navigate with React-router