React Router Dom v4 handle browser back button

Question

How do I disable a browser back button click from user using react-router-dom v4?

I am showing a modal on a page and when the user presses browser back button then the user is taken to the previous screen, instead I want to simply close the modal.

I tried doing this

onBackButtonEvent(event) {
    event.preventDefault();  
    // the user shouldn't be able to move backward or forward  
}
componentDidMount() {
    window.onpopstate = this.onBackButtonEvent;
}

But this doesn't prevent the user from going backward or forward. Is there a way to handle this via react-router-dom?

I have tried multiple solutions but nothing seems to work.

Answer 1

I know this question's a little old but I stumbled on it while looking for the answer myself. There's no clean way to "disable" the back button but to enable the user to only close the modal when clicking the browser back button I found this to work.

Simply pass the history to your modal component in props and call the below on the componentWillUnmount function.

componentWillUnmount() {
    this.props.history.goForward();
}

This will seamlessly force the browser to stay on the same page but close the modal (assuming it's a class component).

UPDATE: If using functional components, the above componentWillUnmount function looks like the hook below.

React.useEffect(() => {
    return () => {
            props.history.goForward();
        }
    }, []);