React Navigation Blocker with React Router Prompt. Usage included.

example.js

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import NavigationBlocker from './NavigationBlocker';

export default () => {
  const [hasUnsavedProgress, setHasUnsavedProgress] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const history = useHistory();

  useEffect(() => {
    setHasUnsavedProgress(inputValue.length > 0);
  }, [inputValue]);

  function onClickCancel() {
    history.push('/some-where');
  }

  return (
    <>
      <NavigationBlocker
        shouldBlockNavigation={hasUnsavedProgress}
        message="You have unsaved changes. Do you want to leave this page?" />
      <input value={inputValue} onChange={e => setInputValue(e.target.value)} />
      <button onClick={onClickCancel}>Cancel</button>
    </>
  );
}

NavigationBlocker.js

import React, { useEffect } from 'react';
import { Prompt } from 'react-router-dom';

export default ({ shouldBlockNavigation = false, message = '' }) => {
  useEffect(() => {
    if (shouldBlockNavigation) {
      window.onbeforeunload = () => true;
    } else {
      window.onbeforeunload = null;
    }

    // Proper clean up
    return () => {
      window.onbeforeunload = null;
    };
  }, [shouldBlockNavigation]);

  return <Prompt when={shouldBlockNavigation} message={message} />;
};