Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

blockerFn in router.history.block() returns true to block navigation β€” somewhat confusing #3876

Open
FelixTellmann opened this issue Mar 28, 2025 · 1 comment
Labels
documentation Everything documentation related

Comments

@FelixTellmann
Copy link

Which project does this relate to?

Router

Describe the bug

Hi TanStack team πŸ‘‹

While using router.history.block() in TanStack Router v1 (via @tanstack/start), I ran into some confusing behavior:

  • I expected blockerFn to behave like typical navigation guards (e.g., return false to block navigation).
  • But in TanStack, it actually works the opposite way:
    • return true β†’ blocks navigation
    • return false β†’ allows navigation

This is quite unexpected β€” especially coming from the legacy React Router v6 unstable_blocker API, other router libraries, or even browser APIs like window.onbeforeunload, where returning false or a blocking signal typically prevents navigation.


Repro:

router.history.block({
  blockerFn: ({ nextLocation }) => {
    // show a modal, etc...
    return true; // this blocks navigation (unexpected)
  }
});

πŸ” Additionally, this behavior appears to contradict the type signature:

```ts
export type BlockerFn = (args: BlockerFnArgs) => Promise<ShouldAllowNavigation> | ShouldAllowNavigation;

The name ShouldAllowNavigation strongly implies:

true β†’ should allow navigation
false β†’ should block it

But the actual behavior is inverted:
true β†’ blocks navigation
false β†’ allows navigation

Thanks so much β€” love the work you’re doing on TanStack πŸ™Œ
This router is really powerful and shaping up to be the future of routing in React.

** Versions**

    "@tanstack/react-router-with-query": "^1.114.29",
    "@tanstack/react-router": "^1.114.29",
    "@tanstack/react-router-devtools": "^1.114.29",
    "@tanstack/react-start": "^1.114.29",

Your Example Website or App

N/A

Steps to Reproduce the Bug or Issue

N/A

Expected behavior

Suggestions:

  • Clarify this behavior in the documentation
  • Consider flipping the logic to align with the name and wider conventions
  • Alternatively, rename the type to something like ShouldBlockNavigation if the current behavior is intentional

Screenshots or Videos

No response

Platform

** Versions**

    "@tanstack/react-router-with-query": "^1.114.29",
    "@tanstack/react-router": "^1.114.29",
    "@tanstack/react-router-devtools": "^1.114.29",
    "@tanstack/react-start": "^1.114.29",

Additional context

No response

@schiller-manuel
Copy link
Contributor

can't change the logic without breaking, so docs and types it is. feel free to raise a PR

@schiller-manuel schiller-manuel added the documentation Everything documentation related label Mar 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Everything documentation related
Projects
None yet
Development

No branches or pull requests

2 participants