`blockerFn` in `router.history.block()` returns `true` to block navigation — somewhat confusing
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 15.1k
- Forks
- 1.9k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 143
Description
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
blockerFnto behave like typical navigation guards (e.g.,return falseto block navigation). - But in TanStack, it actually works the opposite way:
return true→ blocks navigationreturn 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
ShouldBlockNavigationif 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the router.history.block() entry point and inspect the BlockerFn and ShouldAllowNavigation definitions mentioned in the issue. Compare the documented or implemented return-value behavior with the type name, then determine whether the intended resolution is a logic change, a renamed type, or clearer documentation. Done means the behavior and its terminology are consistent and the reported confusion is addressed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100