Override useBlocker when calling router.navigate();

[BrendanC23]

I'm using the useBlocker hook to display a warning message to the user if they click on the back button or click a link while filling out a form. A confirmation dialog is shown before they navigate away.

However, if they click certain buttons, I call router.navigate() and the user navigates to another route. Is there a way to have this ignore the useBlocker and navigate without the confirmation?

[schiller-manuel]

can you please share a complete minimal example by forking one of the existing examples on Stackblitz?

[BrendanC23]

Here's an example. I am using useBlocker to block navigation by displaying a confirmation to the user. When the /about link is clicked, I want to show the confirmation. When the button is clicked, I want to navigate without showing the confirmation.

In reality, there are some router.navigate() calls that I want to show the confirmation message and some where I do not want it to be shown.

I know that there's a condition option in useBlocker. However, the useBlocker and navigate functions are in separate components and it's not straightforward to create a condition for every router.navigate call. A great solution would be something like router.navigate({ to: "/about", ignoreBlocker: true }), but this doesn't exist.

[schiller-manuel]

I added a PR for this: #1797

[BrendanC23]

Thanks! That PR looks great.

[schiller-manuel]

this is now released in https://github.com/TanStack/router/releases/tag/v1.40.0