How to detect user leaving page with react-router

Posted by Editorial Staff | Updated on

In this example, we have shared how to detect user leaving page with react-router. react-router introduces a new way to block navigation using Prompt. Just add this to the component that you would like to block:

This will block any routing, but not page refresh or closing. To block that, you’ll need to add this (updating as needed with the appropriate React lifecycle):

If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@] Your question and answer will appear on and help other developers.

Related Questions & Answers