TanStack / TanStack/router

`blockerFn` in `router.history.block()` returns `true` to block navigation — somewhat confusing

Open
#3,876 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

documentation
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 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.