Navigation guard hooks (confirm leaving page)

[mablin7]

Description

I am not sure if there is a good way to do this currently with client side routing, but it would be really nice if navigation could be intercepted and a confirmation dialog could be shown for when the user has some unsaved changes.

Of course the beforeunload event works, but only for when the user is closing the page,not when using client side navigation.

If there's a way to make this work right now, I'd really appreciate any tips

[brillout]

Indeed, I don't think it's possible and I can't think of a workaround.

it would be really nice if navigation could be intercepted and a confirmation dialog could be shown for when the user has some unsaved changes.

What exactly would that confirmation dialog work?

[brillout]

Makes sense, thank you for elaborating on your use case.

Ideally, Vike would offer a low-level navigation interception mechanism, not only to be able to implement useBlocker() but also for other use cases such as layover next-page rendering. I had a design for this a while ago but it isn't released yet. I plan to eventually work on it again. I went ahead a created a feature request for it: #2350.

In the meantime, is foregoing this UX an acceptable outcome for you?

[davidhckh]

Thanks for considering! I’ve already implemented a workaround, so it’s fine for now. Looking forward to #2350!

[brillout]

What's your workaround?

Maybe something like the following could be made to work:

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', event => event.preventDefault());
  link.style.pointerEvents = 'none'; // Optional: makes them visually unclickable
  link.style.color = 'gray';         // Optional: make it look disabled
  // Add some tooltip?
})

[davidhckh]

I think a solution for the original problem should also cover browser navigation, not just navigation triggered by DOM elements or programmatic routing.
Everything else would feel a bit off UX-wise.

In my current workaround, I’m not relying on a modal anymore. Instead:

• I store unsaved changes in global state
• On route unmount, I persist those changes
• For tab closes or full reloads, I use the browser-native beforeunload confirmation modal (just like Duolingo does)

const handleBeforeUnload = (e: BeforeUnloadEvent) => {
  if (isSameCustomization(originalCustomization, unsavedCustomization)) return;
  e.preventDefault();
  e.returnValue = false;
};

window.addEventListener("beforeunload", handleBeforeUnload);

[brillout]

You're right, document.querySelectorAll('a') seems to be a dead end indeed.

I originally thought about implementing a new hook +onNavigation that is also triggered upon back-/forward navigation (it's actually already half implemented).

But it isn't clear how it would interact with the state of the React component 🤔 I guess sharing the state over a custom pageContext.blockNavigation while using getPageContextClient() inside +onNavigation does the trick. Edit: actually, that's the easy part: the state can simply be shared with a global variable e.g. globalThis.blockNavigation.

Thank you for sharing your workaround. I added our conversation to the feature request (#2350).