fix: route context being undefined when navigating to a new route faster than beforeLoad resolves

Author: jakst

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

@@ -9,6 +9,7 @@ import {
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { z } from 'zod'
 
+import { useEffect } from 'react'
 import {
   Link,
   Outlet,
@@ -2475,6 +2476,61 @@ describe('useRouteContext in the component', () => {
     expect(content).toBeInTheDocument()
   })
 
+  test('route context, (sleep in beforeLoad), with immediate navigation', async () => {
+    const contextValues: Array<{ data: string }> = []
+
+    const rootRoute = createRootRoute({
+      beforeLoad: async () => {
+        await sleep(WAIT_TIME)
+        return { data: 'context-from-beforeLoad' }
+      },
+      component: () => {
+        const context: { data: string } = rootRoute.useRouteContext()
+
+        // Track all context values we receive
+        contextValues.push(context)
+
+        return <Outlet />
+      },
+    })
+
+    function Component() {
+      const navigate = indexRoute.useNavigate()
+
+      // Navigate away immediately on mount
+      useEffect(() => {
+        navigate({ to: '/other' })
+      }, [navigate])
+
+      return <div>Index page</div>
+    }
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: Component,
+    })
+
+    const otherRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/other',
+      component: () => <div>Other page</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([indexRoute, otherRoute])
+    const router = createRouter({ routeTree, history })
+
+    render(<RouterProvider router={router} />)
+
+    // Wait for navigation to complete
+    await screen.findByText('Other page')
+
+    const allContextsValid = contextValues.every(
+      (c) => c.data === 'context-from-beforeLoad',
+    )
+    expect(allContextsValid).toBe(true)
+  })
+
   test('route context (sleep in loader), present in the index route', async () => {
     const rootRoute = createRootRoute({})
     const indexRoute = createRoute({

packages/solid-router/tests/routeContext.test.tsx

@@ -2,6 +2,7 @@ import { cleanup, fireEvent, render, screen } from '@solidjs/testing-library'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { z } from 'zod'
 
+import { createEffect, onMount } from 'solid-js'
 import {
   Link,
   Outlet,
@@ -2392,6 +2393,64 @@ describe('useRouteContext in the component', () => {
     expect(content).toBeInTheDocument()
   })
 
+  // Note: This test passes in solid-router but fails in react-router, even
+  // though in issue (GitHub #6040), the bug manifests in both routers.
+  test('route context, (sleep in beforeLoad), with immediate navigation', async () => {
+    const contextValues: Array<{ data: string }> = []
+
+    const rootRoute = createRootRoute({
+      beforeLoad: async () => {
+        await sleep(WAIT_TIME)
+        return { data: 'context-from-beforeLoad' }
+      },
+      shellComponent: () => {
+        const context = rootRoute.useRouteContext()
+
+        // Track context value at render time
+        createEffect(() => {
+          const contextValue: { data: string } = context()
+          contextValues.push(contextValue)
+        })
+
+        return <Outlet />
+      },
+    })
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => {
+        const navigate = indexRoute.useNavigate()
+
+        // Navigate away immediately on mount
+        onMount(() => {
+          navigate({ to: '/other' })
+        })
+
+        return <div>Index page</div>
+      },
+    })
+
+    const otherRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/other',
+      component: () => <div>Other page</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([indexRoute, otherRoute])
+    const router = createRouter({ routeTree, history })
+
+    render(() => <RouterProvider router={router} />)
+
+    // Wait for navigation to complete
+    await screen.findByText('Other page')
+
+    const allContextsValid = contextValues.every(
+      (c) => c.data === 'context-from-beforeLoad',
+    )
+    expect(allContextsValid).toBe(true)
+  })
+
   test('route context (sleep in loader), present root route', async () => {
     const rootRoute = createRootRoute({
       loader: async () => {