Next.js block navigation on unsaved changes

useNavigationLock.ts

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

/** Ask for confirmation before changing page or leaving site.
 *
 * @see https://git.io/JOskG
 */
const useNavigationLock = (
  isEnabled = true,
  warningText = 'You have unsaved changes – are you sure you wish to leave this page?',
) => {
  const router = useRouter();

  useEffect(() => {
    const handleWindowClose = (e: BeforeUnloadEvent) => {
      if (!isEnabled) return;
      e.preventDefault();
      return (e.returnValue = warningText);
    };

    const handleBrowseAway = () => {
      if (!isEnabled) return;
      if (window.confirm(warningText)) return;
      router.events.emit('routeChangeError');
      throw 'routeChange aborted.';
    };

    window.addEventListener('beforeunload', handleWindowClose);

    router.events.on('routeChangeStart', handleBrowseAway);

    return () => {
      window.removeEventListener('beforeunload', handleWindowClose);
      router.events.off('routeChangeStart', handleBrowseAway);
    };
  }, [isEnabled]);
};

export default useNavigationLock;

Thank you! Note that if you're using javascript don't forget to remove the BeforeUnloadEvent in e: BeforeUnloadEvent

React Hook useEffect has missing dependencies: 'router.events' and 'warningText'.

Either include them or remove the dependency array. [react-hooks/exhaustive-deps](facebook/react#14920)

Please how do I use It in my js code.

Does not work when window.confirm() is false, still navigates away

Please how do I use It in my js code.

function MyComponent() {
  // call the hook
  // you may pass a custom message useNavigationLock(true, 'Don't leave please');
  useNavigationLock();

  return <p>Here's how you use it</p>;
}

@Gatesvert81

I found an issue. When I click the cancel button it clear the states.