refactor: don't reparse upon navigation (#6398)

Author: schiller-manuel

e2e/react-router/basic-file-based-code-splitting/src/routeTree.gen.ts

@@ -171,7 +171,7 @@ declare module '@tanstack/react-router' {
     '/_layout': {
       id: '/_layout'
       path: ''
-      fullPath: ''
+      fullPath: '/'
       preLoaderRoute: typeof LayoutRouteImport
       parentRoute: typeof rootRouteImport
     }
@@ -199,7 +199,7 @@ declare module '@tanstack/react-router' {
     '/_layout/_layout-2': {
       id: '/_layout/_layout-2'
       path: ''
-      fullPath: ''
+      fullPath: '/'
       preLoaderRoute: typeof LayoutLayout2RouteImport
       parentRoute: typeof LayoutRoute
     }

e2e/react-router/basic-react-query-file-based/src/routeTree.gen.ts

@@ -124,7 +124,7 @@ declare module '@tanstack/react-router' {
     '/_layout': {
       id: '/_layout'
       path: ''
-      fullPath: ''
+      fullPath: '/'
       preLoaderRoute: typeof LayoutRouteImport
       parentRoute: typeof rootRouteImport
     }
@@ -152,7 +152,7 @@ declare module '@tanstack/react-router' {
     '/_layout/_layout-2': {
       id: '/_layout/_layout-2'
       path: ''
-      fullPath: ''
+      fullPath: '/'
       preLoaderRoute: typeof LayoutLayout2RouteImport
       parentRoute: typeof LayoutRoute
     }

e2e/vue-start/custom-basepath/src/routeTree.gen.ts

@@ -106,7 +106,7 @@ export interface FileRoutesByFullPath {
   '/redirect/throw-it': typeof RedirectThrowItRoute
   '/users/$userId': typeof UsersUserIdRoute
   '/posts/': typeof PostsIndexRoute
-  '/redirect': typeof RedirectIndexRoute
+  '/redirect/': typeof RedirectIndexRoute
   '/users/': typeof UsersIndexRoute
   '/api/users/$userId': typeof ApiUsersUserIdRoute
   '/posts/$postId/deep': typeof PostsPostIdDeepRoute
@@ -155,7 +155,7 @@ export interface FileRouteTypes {
     | '/redirect/throw-it'
     | '/users/$userId'
     | '/posts/'
-    | '/redirect'
+    | '/redirect/'
     | '/users/'
     | '/api/users/$userId'
     | '/posts/$postId/deep'
@@ -250,7 +250,7 @@ declare module '@tanstack/vue-router' {
     '/redirect/': {
       id: '/redirect/'
       path: '/redirect'
-      fullPath: '/redirect'
+      fullPath: '/redirect/'
       preLoaderRoute: typeof RedirectIndexRouteImport
       parentRoute: typeof rootRouteImport
     }

packages/history/src/index.ts

@@ -4,8 +4,13 @@
 
 export interface NavigateOptions {
   ignoreBlocker?: boolean
+  /** When true, Transitioner should skip calling load() - commitLocation handles it */
+  skipTransitionerLoad?: boolean
 }
 
+/** Result of a navigation attempt (push/replace) */
+export type NavigationResult = { type: 'SUCCESS' } | { type: 'BLOCKED' }
+
 type SubscriberHistoryAction =
   | {
       type: Exclude<HistoryAction, 'GO'>
@@ -15,18 +20,27 @@ type SubscriberHistoryAction =
       index: number
     }
 
-type SubscriberArgs = {
+export type SubscriberArgs = {
   location: HistoryLocation
   action: SubscriberHistoryAction
+  navigateOpts?: NavigateOptions
 }
 
 export interface RouterHistory {
   location: HistoryLocation
   length: number
   subscribers: Set<(opts: SubscriberArgs) => void>
   subscribe: (cb: (opts: SubscriberArgs) => void) => () => void
-  push: (path: string, state?: any, navigateOpts?: NavigateOptions) => void
-  replace: (path: string, state?: any, navigateOpts?: NavigateOptions) => void
+  push: (
+    path: string,
+    state?: any,
+    navigateOpts?: NavigateOptions,
+  ) => Promise<NavigationResult>
+  replace: (
+    path: string,
+    state?: any,
+    navigateOpts?: NavigateOptions,
+  ) => Promise<NavigationResult>
   go: (index: number, navigateOpts?: NavigateOptions) => void
   back: (navigateOpts?: NavigateOptions) => void
   forward: (navigateOpts?: NavigateOptions) => void
@@ -56,6 +70,21 @@ export type ParsedHistoryState = HistoryState & {
   key?: string // TODO: Remove in v2 - use __TSR_key instead
   __TSR_key?: string
   __TSR_index: number
+  /** Whether to reset scroll position on this navigation (default: true) */
+  __TSR_resetScroll?: boolean
+  /** Session id for cached TSR internals */
+  __TSR_sessionId?: string
+  /** Match snapshot for fast-path on back/forward navigation */
+  __TSR_matches?: {
+    routeIds: Array<string>
+    params: Record<string, string>
+    globalNotFoundRouteId?: string
+    searchStr?: string
+    validatedSearches?: Array<{
+      search: Record<string, unknown>
+      strictSearch: Record<string, unknown>
+    }>
+  }
 }
 
 type ShouldAllowNavigation = any
@@ -116,9 +145,14 @@ export function createHistory(opts: {
   let location = opts.getLocation()
   const subscribers = new Set<(opts: SubscriberArgs) => void>()
 
-  const notify = (action: SubscriberHistoryAction) => {
+  const notify = (
+    action: SubscriberHistoryAction,
+    navigateOpts?: NavigateOptions,
+  ) => {
     location = opts.getLocation()
-    subscribers.forEach((subscriber) => subscriber({ location, action }))
+    subscribers.forEach((subscriber) =>
+      subscriber({ location, action, navigateOpts }),
+    )
   }
 
   const handleIndexChange = (action: SubscriberHistoryAction) => {
@@ -130,11 +164,11 @@ export function createHistory(opts: {
     task,
     navigateOpts,
     ...actionInfo
-  }: TryNavigateArgs) => {
+  }: TryNavigateArgs): Promise<NavigationResult> => {
     const ignoreBlocker = navigateOpts?.ignoreBlocker ?? false
     if (ignoreBlocker) {
       task()
-      return
+      return { type: 'SUCCESS' }
     }
 
     const blockers = opts.getBlockers?.() ?? []
@@ -150,12 +184,13 @@ export function createHistory(opts: {
         })
         if (isBlocked) {
           opts.onBlocked?.()
-          return
+          return { type: 'BLOCKED' }
         }
       }
     }
 
     task()
+    return { type: 'SUCCESS' }
   }
 
   return {
@@ -176,10 +211,10 @@ export function createHistory(opts: {
     push: (path, state, navigateOpts) => {
       const currentIndex = location.state[stateIndexKey]
       state = assignKeyAndIndex(currentIndex + 1, state)
-      tryNavigation({
+      return tryNavigation({
         task: () => {
           opts.pushState(path, state)
-          notify({ type: 'PUSH' })
+          notify({ type: 'PUSH' }, navigateOpts)
         },
         navigateOpts,
         type: 'PUSH',
@@ -190,10 +225,10 @@ export function createHistory(opts: {
     replace: (path, state, navigateOpts) => {
       const currentIndex = location.state[stateIndexKey]
       state = assignKeyAndIndex(currentIndex, state)
-      tryNavigation({
+      return tryNavigation({
         task: () => {
           opts.replaceState(path, state)
-          notify({ type: 'REPLACE' })
+          notify({ type: 'REPLACE' }, navigateOpts)
         },
         navigateOpts,
         type: 'REPLACE',

packages/react-router/src/Transitioner.tsx

@@ -7,6 +7,7 @@ import {
 import { useLayoutEffect, usePrevious } from './utils'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
+import type { SubscriberArgs } from '@tanstack/history'
 
 export function Transitioner() {
   const router = useRouter()
@@ -41,7 +42,17 @@ export function Transitioner() {
   // Subscribe to location changes
   // and try to load the new location
   React.useEffect(() => {
-    const unsub = router.history.subscribe(router.load)
+    const unsub = router.history.subscribe(
+      ({ navigateOpts }: SubscriberArgs) => {
+        // If commitLocation initiated this navigation, it handles load() itself
+        if (navigateOpts?.skipTransitionerLoad) {
+          return
+        }
+
+        // External navigation (pop, direct history.push, etc): call load normally
+        router.load()
+      },
+    )
 
     const nextLocation = router.buildLocation({
       to: router.latestLocation.pathname,

packages/react-router/tests/Matches.test.tsx

@@ -344,7 +344,7 @@ describe('matching on different param types', () => {
 
       await act(() => render(<RouterProvider router={router} />))
 
-      act(() => router.history.push(nav))
+      await act(() => router.history.push(nav))
 
       const paramsToCheck = await screen.findByTestId('params')
       const matchesToCheck = await screen.findByTestId('matches')

packages/react-router/tests/useNavigate.test.tsx

@@ -7,6 +7,7 @@ import {
   fireEvent,
   render,
   screen,
+  waitFor,
 } from '@testing-library/react'
 
 import { z } from 'zod'
@@ -1316,9 +1317,11 @@ test('when setting search params with 2 parallel navigate calls', async () => {
   })
 
   render(<RouterProvider router={router} />)
-  expect(router.state.location.search).toEqual({
-    param1: 'param1-default',
-    param2: 'param2-default',
+  await waitFor(() => {
+    expect(router.state.location.search).toEqual({
+      param1: 'param1-default',
+      param2: 'param2-default',
+    })
   })
 
   const postsButton = await screen.findByRole('button', { name: 'search' })
@@ -1327,7 +1330,12 @@ test('when setting search params with 2 parallel navigate calls', async () => {
 
   expect(await screen.findByTestId('param1')).toHaveTextContent('foo')
   expect(await screen.findByTestId('param2')).toHaveTextContent('bar')
-  expect(router.state.location.search).toEqual({ param1: 'foo', param2: 'bar' })
+  await waitFor(() => {
+    expect(router.state.location.search).toEqual({
+      param1: 'foo',
+      param2: 'bar',
+    })
+  })
   const search = new URLSearchParams(window.location.search)
   expect(search.get('param1')).toEqual('foo')
   expect(search.get('param2')).toEqual('bar')
@@ -1447,21 +1455,27 @@ test.each([true, false])(
 
     fireEvent.click(postButton)
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+    })
 
     const searchButton = await screen.findByTestId('search-btn')
 
     fireEvent.click(searchButton)
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value1' })
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.search).toEqual({ param1: 'value1' })
+    })
 
     const searchButton2 = await screen.findByTestId('search2-btn')
 
     fireEvent.click(searchButton2)
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value2' })
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.search).toEqual({ param1: 'value2' })
+    })
   },
 )
 
@@ -1760,22 +1774,28 @@ test.each([true, false])(
 
     fireEvent.click(detail1AddBtn)
 
-    expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
-    expect(router.state.location.search).toEqual({ _test: true })
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+      expect(router.state.location.search).toEqual({ _test: true })
+    })
 
     const detail1RemoveBtn = await screen.findByTestId('detail-btn-remove-1')
 
     fireEvent.click(detail1RemoveBtn)
 
-    expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
-    expect(router.state.location.search).toEqual({})
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+      expect(router.state.location.search).toEqual({})
+    })
 
     const detail2AddBtn = await screen.findByTestId('detail-btn-add-2')
 
     fireEvent.click(detail2AddBtn)
 
-    expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
-    expect(router.state.location.search).toEqual({ _test: true })
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+      expect(router.state.location.search).toEqual({ _test: true })
+    })
   },
 )
 

packages/router-core/src/index.ts

@@ -69,7 +69,11 @@ export type {
   CreateLazyFileRoute,
 } from './fileRoute'
 
-export type { ParsedLocation } from './location'
+export type {
+  MatchSnapshot,
+  ParsedLocation,
+  ValidatedSearchEntry,
+} from './location'
 export type { Manifest, RouterManagedTag } from './manifest'
 export { isMatch } from './Matches'
 export type {