Detecting user leaving page with react-router

The Solution to Detecting user leaving page with react-router is

react-router v4 introduces a new way to block navigation using Prompt. Just add this to the component that you would like to block:

import { Prompt } from 'react-router'

const MyComponent = () => (
      message='You have unsaved changes, are you sure you want to leave?'
    {/* Component JSX */}

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):

componentDidUpdate = () => {
  if (shouldBlockNavigation) {
    window.onbeforeunload = () => true
  } else {
    window.onbeforeunload = undefined

onbeforeunload has various support by browsers.

~ Answered on 2018-03-08 00:35:59

Most Viewed Questions: