fix(router-core): preserve context during reloads

.changeset/fine-doors-stop.md

@@ -0,0 +1,8 @@
+---
+'@tanstack/react-router': patch
+'@tanstack/solid-router': patch
+'@tanstack/router-core': patch
+'@tanstack/vue-router': patch
+---
+
+preserve context during reloads

e2e/react-router/issue-4759/src/main.tsx

@@ -1,13 +1,25 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import {
+  Outlet,
   RouterProvider,
   createRootRoute,
   createRoute,
   createRouter,
 } from '@tanstack/react-router'
 
-const rootRoute = createRootRoute()
+const rootRoute = createRootRoute({
+  context: () => ({ locale: 'en' }),
+  component: RootComponent,
+})
+function RootComponent() {
+  const { locale } = rootRoute.useRouteContext()
+  return (
+    <div data-root-locale={locale}>
+      <Outlet />
+    </div>
+  )
+}
 const indexRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/',
@@ -19,18 +31,34 @@ const routePendingRoute = createRoute({
   path: '/route-pending',
   pendingMs: 0,
   pendingMinMs: 0,
-  pendingComponent: () => (
-    <div data-state="pending" data-pending-source="route">
-      route pending
-    </div>
-  ),
+  pendingComponent: RoutePending,
   loader: () => new Promise((resolve) => setTimeout(resolve, 1_000)),
   component: () => <div data-state="loaded">loaded</div>,
 })
+function RoutePending() {
+  const { locale } = routePendingRoute.useRouteContext()
+  return (
+    <div data-state="pending" data-pending-source="route" data-locale={locale}>
+      route pending
+    </div>
+  )
+}
 const router = createRouter({
   routeTree: rootRoute.addChildren([indexRoute, routePendingRoute]),
 })
 const usesRoutePending = window.location.pathname === '/route-pending'
+function DefaultPending() {
+  const { locale } = indexRoute.useRouteContext()
+  return (
+    <div
+      data-state="pending"
+      data-pending-source="default"
+      data-locale={locale}
+    >
+      default pending
+    </div>
+  )
+}
 
 createRoot(document.getElementById('app')!).render(
   <StrictMode>
@@ -39,11 +67,7 @@ createRoot(document.getElementById('app')!).render(
         router={router}
         defaultPendingMs={usesRoutePending ? 1_000 : 0}
         defaultPendingMinMs={0}
-        defaultPendingComponent={() => (
-          <div data-state="pending" data-pending-source="default">
-            default pending
-          </div>
-        )}
+        defaultPendingComponent={DefaultPending}
       />
     </main>
   </StrictMode>,

e2e/react-router/issue-4759/tests/issue-4759.spec.ts

@@ -5,11 +5,12 @@ async function expectNoBlankFrame(
   page: Page,
   pendingSource: 'default' | 'route',
 ) {
-  await expect(
-    page.locator(
-      `[data-state="pending"][data-pending-source="${pendingSource}"]`,
-    ),
-  ).toBeVisible()
+  const pending = page.locator(
+    `[data-state="pending"][data-pending-source="${pendingSource}"]`,
+  )
+  await expect(pending).toBeVisible()
+  await expect(pending).toHaveAttribute('data-locale', 'en')
+  await expect(page.locator('[data-root-locale="en"]')).toBeVisible()
 
   const paintStates = await page.evaluate(
     () =>

packages/react-router/src/Transitioner.tsx

@@ -87,7 +87,7 @@ export function Transitioner({
         }
       })
     } else if (!router._tx) {
-      router.load().catch(console.error)
+      router.load({ sync: true }).catch(console.error)
     }
 
     return unsub