Navigation blocking but ignoring sibling route changes
I have a route that contains a number of child routes. I want to use the
<Block /> component to block navigation when navigating away from the parent route (to display a save warning modal). The problem is that this also blocks navigation between the child routes, which is not what I want. How do I do this? I can't find an obvious solution.
Basically, I want this behavior:
/parent/childA to /parent/childB = don't block
/parent/childA to /some-other-route = block3 Replies
multiple-amethystOP•16mo ago
Is there a hook or something I can use to get the destination route before the navigation is blocked? If so, I haven't been able to find it
vicious-gold•16mo ago
we do have the
useBlocker hook, which was updated in this PR https://github.com/TanStack/router/pull/1649
see https://tanstack.com/router/v1/docs/framework/react/api/router/useBlockerHook
however we have not yet implemented the currentLocation and nextLocation part, which is what you would probably needGitHub
feat(react-router): improve the blocker functionality for use with ...
We were talking about this on discord, trying to find a handy way to display custom UI when blocking navigation.
I adapted a bit @freshgiammi's first draft and expanded it to the Blocker compon...
useBlocker hook | TanStack Router React Docs
The useBlocker method is a hook that blocks navigation when a condition is met.
useBlocker options
vicious-gold•16mo ago
are you interested in implementing this?