Alert for unsaved changes before navigation in Svelte

Question

I have a Svelte application with form content. After a change in the form, I can trigger "unsaved change" alert when the page is refreshed. But after when i make a change in the form, if I try to navigate to another page with svelte navigation, I cannot handle unsaved change alert. How can I do this using Svelte Navigator?

Answer 1

While his question was specifically asking about Svelte navigator, here's a solution for anyone using SvelteKit:

beforeNavigate(({ cancel }) => {
  if (dirty) {
    if (!confirm('Are you sure you want to leave this page? You have unsaved changes that will be lost.')) {
      cancel();
    }
  }
});

See the beforeNavigate docs for more information.