TanStack / TanStack/router

feat(router-core): add cancellable route-level navigation hooks

Open
#7,784 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Goal

Add a route-level hook that runs before a navigation commits and can allow, redirect, or cancel the navigation.

This differs from onBeforeNavigate, which is an observer event and cannot affect the navigation outcome.

Scope

  • Define the hook’s contract and timing.
  • Support navigation cancellation and redirects.
  • Define behavior for nested routes, browser back/forward, preloads, and errors.
  • Implement the shared behavior in router-core.
  • Keep React, Solid, and Vue APIs aligned.
  • Add unit and E2E coverage.
  • Document the API and its relationship to onBeforeNavigate.

Related Work

This continues the draft implementation in #3473

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 by reviewing the draft implementation in issue #3473 and locating the shared router-core navigation flow. Trace how React, Solid, and Vue APIs currently expose navigation and compare their tests before defining the hook contract. Done means aligned cancellation and redirect behavior across nested routes, history navigation, preloads, and errors, with unit, E2E, and documentation coverage.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.