React Show a custom modal on browser back button

Question

I have a route named PROFILE where a user is presented with a form.

what I want to do is show a custom modal when user click on the browser back button if the form is dirty, otherwise the browser back button should have the default behaviour.

Is that possible?

react-router-dom - 4.2.2 react - 16.0.0

Any help is Appreciated

Check out my answer to this question. https://stackoverflow.com/a/66873913/5782438 — knigalye, Mar 30 '21 at 15:33

score 0 · Answer 1 · answered Oct 15 '19 at 13:27

try this :

import { browserHistory } from 'react-router';

componentDidMount() {
    this.backListener = browserHistory.listen(location => {
      if (location.action === "POP") {
        // Show your model
      }
    });
  }

componentWillUnmount() {
    this.backListener();
}

for more information : Intercept/handle browser's back button in React-router?

React Show a custom modal on browser back button

1 Answers1