Prevent navigation (usePrompt & useBlocker)
Is there a way to programmatically prevent the navigation from happening?
I would like to give the user a confirmation message when they try to navigate to another page while there is still an unfinished form to be submitted.
It seems that there has been a way to do this with browser-native prompt dialog via
usePrompt, but it has been commented out: https://github.com/TanStack/router/blob/ce80f78665c47ccde4823352f7b71c9b63da112a/packages/react-router/src/index.tsx#L728
Even if usePrompt was working, I would prefer showing the user a custom modal dialog instead of using the browser-native dialog. In react-router there is a way to do this with useBlocker hook. Anything similar planned for TanStack router?GitHub
router/index.tsx at ce80f78665c47ccde4823352f7b71c9b63da112a · TanS...
🤖 Type-safe router w/ built-in caching & URL state management for JS/TS, React, Preact, Solid, Vue, Svelte and Angular - router/index.tsx at ce80f78665c47ccde4823352f7b71c9b63da112a · TanSt...
2 Replies
extended-salmon•3y ago
Yep
It’s cooking
genetic-orangeOP•3y ago
I see there is now
useBlocker in the latest version of TanStack router. However, it seems that is uses window.confirm to prevent the navigation. Is there any way to use a custom modal dialog box for this? What about passing a custom confirm-function?
As discussed in the #router channel, maybe the custom dialog box / confirmation function is not necessary because we cannot use it with "onBeforeUnload" event anyway.
However, another thing that I noticed: I call useBlocker with condition set to true and this seems to work only the first time: when I navigate away, the confirm dialog is shown. However, if I click "Cancel" and then try to navigate away again, the confirm dialog is not shown even if my condition still holds true. Is this a bug in the useBlocker function or in my own code?