Update:
Prompt, usePrompt and useBlocker have been removed from react-router-dom. This answer will not currently work, though this might change. The github issue, opened Oct 2021, is here
The answer…
This answer uses router v6.
- You can use usePrompt.
- usePrompt will show the confirm modal/popup when you go to another route i.e. on mount.
- A generic alert with message when you try to close the browser. It handles beforeunload internally
usePrompt("Hello from usePrompt -- Are you sure you want to leave?", isBlocking);
- You can use useBlocker
- useBlocker will simply block user when attempting to navigating away i.e. on unmount
- A generic alert with message when you try to close the browser. It handles beforeunload internally
useBlocker(
() => "Hello from useBlocker -- are you sure you want to leave?",
isBlocking
);
Demo for both 1 & 2
- You can also use beforeunload. But you have to do your own logic. See an example here