I have been trying to prevent the user from navigating away from a page. I have tried the window.onbeforeunload
event and the Prompt
component from react-router-dom
, both of them make use of the browser's in built dialog box (is that the right term?) to inform the user. I am not sure how to prevent the user from navigating away while presenting them a choice on a Modal
component.
I am using component state and the changes made by the user on the page are indicated by piece of state (is the page dirty, boolean).
I am new to React and any suggestions will be deeply appreciated.
Asked
Active
Viewed 313 times
0

SaiBorg
- 326
- 2
- 14
-
2Don't think it's possible (thankfully), pretty sure the Prompt-like dialog is what you're stuck with. (otherwise, if it were possible, the user wouldn't have that much control over their own browser, especially on shady sites) – CertainPerformance Oct 26 '18 at 00:18
-
Possible duplicate of [*Trying to block users from leaving page before selecting answer in react*](https://stackoverflow.com/questions/48796595/trying-to-block-users-from-leaving-page-before-selecting-answer-in-react) or [*How can we constraint/restrict the user from page reloading or browser back or forward*](https://stackoverflow.com/questions/50448661/how-can-we-constraint-restrict-the-user-from-page-reloading-or-browser-back-or-f) – RobG Oct 26 '18 at 00:29
-
@RobG sorry for not mentioning that in my question! I already read and tried them both and there are quite a few others too. – SaiBorg Oct 26 '18 at 00:56
-
@CertainPerformance ah! Ok. I tried to look for something that would ease my situation! I started having doubts about the approach itself when I wasn’t able to find anything. – SaiBorg Oct 26 '18 at 00:58