0

I want to pop a modal with "Cancel" and "Yes" buttons when a user attempts to leave the single-page app.

To provide some context, I am working on a single page app that appears on a larger site that is not part of the single page app (so, the header and footer is part of the larger site, and single-page-app is the content). When a user attempts to leave to another part of the site (by clicking somewhere in the nav for instance) that is not part of the single page app, I want a warning modal to display with a warning. A user can close or refresh the page as much as they want, and it shouldn't pop a modal. Same thing if a user hard-codes a url (say, google.com in the browser), the modal should not pop.

So far the other similar threads I found on stackoverflow either uses Prompt component, or window.onbeforeunload. Both of these have the issue of them popping a default text box with a warning, and not a custom modal, which is an important problem, but that isn't all of the issue.

Prompt, to my understanding triggers whenever a user redirects within the single page app, which is not the behavior that I want.

window.onbeforeunload, to my undertstanding triggers even when refresh or close, which is not the behavior I want.

Maybe this isn't such a common problem, since I can't seem to find an easy solution for this, but any and all ideas are greatly appreciated.

Seaside9
  • 595
  • 1
  • 4
  • 11
  • https://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own might help – Colin Ricardo Jan 06 '19 at 19:39
  • I have... the problem here is that it uses `window.onbeforeunload`, so it will trigger when a user refreshes or closes the page. The first answer also states that there isn't really a way to make this work with a customized modal, which is what I am trying to accomplish. – Seaside9 Jan 06 '19 at 19:53
  • 1
    You can use the `componentWillUnmount` react lifecycle hook, It gets triggered whenever your component gets removed from the dom https://reactjs.org/docs/react-component.html#componentwillunmount – Chriss Hd Jan 07 '19 at 07:41
  • Interesting solution. But is there a way to prevent the unmounting in `componentWillUnmount`? My understanding is that there really isnt. – Seaside9 Jan 07 '19 at 21:53

0 Answers0