Next JS: Warn User for Unsaved Form before Route Change - next.js

Question

In Next How can i stop Router Navigation in Next JS.
I am trying to use routerChangeStart event to stop navigation.
useEffect(() => {
const handleRouteChange = (url: string): boolean => {
if (dirty) {
return false;
}
return true;
};
Router.events.on('routeChangeStart', handleRouteChange);
return () => {
Router.events.off('routeChangeStart', handleRouteChange);
};
}, []);

Answer 1

It seems there is no perfect way to this but I handle it with this little trick:
React.useEffect(() => {
const confirmationMessage = 'Changes you made may not be saved.';
const beforeUnloadHandler = (e: BeforeUnloadEvent) => {
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage; // Gecko + Webkit, Safari, Chrome etc.
};
const beforeRouteHandler = (url: string) => {
if (Router.pathname !== url && !confirm(confirmationMessage)) {
// to inform NProgress or something ...
Router.events.emit('routeChangeError');
// tslint:disable-next-line: no-string-throw
throw `Route change to "${url}" was aborted (this error can be safely ignored). See https://github.com/zeit/next.js/issues/2476.`;
}
};
if (notSaved) {
window.addEventListener('beforeunload', beforeUnloadHandler);
Router.events.on('routeChangeStart', beforeRouteHandler);
} else {
window.removeEventListener('beforeunload', beforeUnloadHandler);
Router.events.off('routeChangeStart', beforeRouteHandler);
}
return () => {
window.removeEventListener('beforeunload', beforeUnloadHandler);
Router.events.off('routeChangeStart', beforeRouteHandler);
};
}, [notSaved]);
This code will interrupt changing route (with nextJs Route and also browser refresh / close tab action)

Answer 2

Here's my custom hook solution that seems to cut it, written in TypeScript.
import Router from "next/router"
import { useEffect } from "react"
const useWarnIfUnsavedChanges = (unsavedChanges: boolean, callback: () => boolean) => {
useEffect(() => {
if (unsavedChanges) {
const routeChangeStart = () => {
const ok = callback()
if (!ok) {
Router.events.emit("routeChangeError")
throw "Abort route change. Please ignore this error."
}
}
Router.events.on("routeChangeStart", routeChangeStart)
return () => {
Router.events.off("routeChangeStart", routeChangeStart)
}
}
}, [unsavedChanges])
}
You can use it in your component as follows:
useWarnIfUnsavedChanges(changed, () => {
return confirm("Warning! You have unsaved changes.")
})

Answer 3

You can write a custom hook.
import Router from 'next/router';
import { useEffect } from 'react';
const useWarnIfUnsavedChanges = (unsavedChanges, callback) => {
useEffect(() => {
const routeChangeStart = url => {
if (unsavedChanges) {
Router.events.emit('routeChangeError');
Router.replace(Router, Router.asPath, { shallow: true });
throw 'Abort route change. Please ignore this error.';
}
};
Router.events.on('routeChangeStart', routeChangeStart);
return () => {
Router.events.off('routeChangeStart', routeChangeStart);
};
}, [unsavedChanges]);
};
export default useWarnIfUnsavedChanges;
Take inspiration from: https://github.com/vercel/next.js/discussions/12348#discussioncomment-8089

Answer 4

Thanks #raimohanska for good solution. I did a small update to include confirmation for page reload as well:
/**
* Asks for confirmation to leave/reload if there are unsaved changes.
*/
import Router from 'next/router';
import { useEffect } from 'react';
export const useOnLeavePageConfirmation = (unsavedChanges: boolean) => {
useEffect(() => {
// For reloading.
window.onbeforeunload = () => {
if (unsavedChanges) {
return 'You have unsaved changes. Do you really want to leave?';
}
};
// For changing in-app route.
if (unsavedChanges) {
const routeChangeStart = () => {
const ok = confirm('You have unsaved changes. Do you really want to leave?');
if (!ok) {
Router.events.emit('routeChangeError');
throw 'Abort route change. Please ignore this error.';
}
};
Router.events.on('routeChangeStart', routeChangeStart);
return () => {
Router.events.off('routeChangeStart', routeChangeStart);
};
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [unsavedChanges]);
};
Usage:
useOnLeavePageConfirmation(changesUnsaved);

Answer 5

You need to make a hook that will prevent the router from changing. But for it to work correctly, you should know if your form is pristine or not. To do that with react-final-form they have a FormSpy component that can subscribe to that:
import { Form, FormSpy } from 'react-final-form'
import { useWarnIfUnsaved } from '#hooks/useWarnIfUnsaved'
const [isPristine, setPristine] = useState(true)
useWarnIfUnsaved(!isPristine, () => {
return confirm('Warning! You have unsaved changes.')
})
return (
<Form
render={({ handleSubmit, submitting, submitError }) => {
return (
<>
<FormSpy subscription={{ pristine: true }}>
{(props) => {
setPristine(props.pristine)
return undefined
}}
</FormSpy>
...
And the suggested hook for Typescript from #raimohanska worked for me:
import Router from "next/router"
import { useEffect } from "react"
export const useWarnIfUnsaved = (unsavedChanges: boolean, callback: () => boolean) => {
useEffect(() => {
if (unsavedChanges) {
const routeChangeStart = () => {
const ok = callback()
if (!ok) {
Router.events.emit("routeChangeError")
throw "Abort route change. Please ignore this error."
}
}
Router.events.on("routeChangeStart", routeChangeStart)
return () => {
Router.events.off("routeChangeStart", routeChangeStart)
}
}
}, [unsavedChanges])
}