fix: ensure context is consistent on concurrent match loads

packages/react-router/src/Matches.tsx

@@ -48,6 +48,7 @@ export interface RouteMatch<
   searchError: unknown
   updatedAt: number
   loadPromise: ControlledPromise<void>
+  beforeLoadPromise: ControlledPromise<void>
   loaderPromise: Promise<TLoaderData>
   loaderData?: TLoaderData
   routeContext: TRouteContext

packages/react-router/src/router.ts

@@ -1082,6 +1082,7 @@ export class Router<
           isFetching: false,
           error: undefined,
           paramsError: parseErrors[index],
+          beforeLoadPromise: createControlledPromise<void>(),
           loaderPromise: Promise.resolve(),
           loadPromise,
           routeContext: undefined!,
@@ -1785,7 +1786,9 @@ export class Router<
               matches[index] = match = updateMatch(match.id, (prev) => ({
                 ...prev,
                 isFetching: 'beforeLoad',
+                beforeLoadPromise: createControlledPromise<void>(),
                 loadPromise,
+                abortController,
               }))
 
               const handleSerialError = (err: any, routerCode: string) => {
@@ -1869,16 +1872,17 @@ export class Router<
                   ...beforeLoadContext,
                 }
 
-                matches[index] = match = {
+                matches[index] = match = updateMatch(match.id, () => ({
                   ...match,
                   routeContext: replaceEqualDeep(
                     match.routeContext,
                     beforeLoadContext,
                   ),
                   context: replaceEqualDeep(match.context, context),
                   abortController,
-                }
-                updateMatch(match.id, () => match)
+                }))
+
+                match.beforeLoadPromise.resolve()
               } catch (err) {
                 handleSerialError(err, 'BEFORE_LOAD')
                 break
@@ -1895,6 +1899,18 @@ export class Router<
                 const parentMatchPromise = matchPromises[index - 1]
                 const route = this.looseRoutesById[match.routeId]!
 
+                // In case the beforeLoad isn't done (such as multiple load routines running concurently)
+                // we need to await it, to ensure context is correctly generated
+                if (match.beforeLoadPromise.status === 'pending') {
+                  await match.beforeLoadPromise
+                  const existing = getRouteMatch(this.state, match.id)!
+                  matches[index] = match = {
+                    ...match,
+                    routeContext: existing.routeContext,
+                    context: existing.context,
+                  }
+                }
+
                 const loaderContext: LoaderFnContext = {
                   params: match.params,
                   deps: match.loaderDeps,
@@ -1910,10 +1926,8 @@ export class Router<
                 }
 
                 const fetchAndResolveInLoaderLifetime = async () => {
-                  const existing = getRouteMatch(this.state, match.id)!
                   let lazyPromise = Promise.resolve()
                   let componentsPromise = Promise.resolve() as Promise<any>
-                  let loaderPromise = existing.loaderPromise
 
                   // If the Matches component rendered
                   // the pending component and needs to show it for
@@ -1982,7 +1996,8 @@ export class Router<
                       checkLatest()
 
                       // Kick off the loader!
-                      loaderPromise = route.options.loader?.(loaderContext)
+                      const loaderPromise =
+                        route.options.loader?.(loaderContext)
 
                       matches[index] = match = updateMatch(
                         match.id,
@@ -1993,7 +2008,7 @@ export class Router<
                       )
                     }
 
-                    let loaderData = await loaderPromise
+                    let loaderData = await match.loaderPromise
                     if (this.serializeLoaderData) {
                       loaderData = this.serializeLoaderData(loaderData, {
                         router: this,

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

@@ -381,6 +381,42 @@ describe('beforeLoad in the route definition', () => {
     expect(mock).toHaveBeenCalledTimes(1)
   })
 
+  test("on navigate (with preload), loader isn't invoked with undefined context if beforeLoad is pending when navigation happens", async () => {
+    const mock = vi.fn()
+
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+    })
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      beforeLoad: async () => {
+        await sleep(WAIT_TIME) // Use a longer delay here
+        return { mock }
+      },
+      loader: async ({ context }) => {
+        await sleep(WAIT_TIME)
+        context.mock()
+      },
+    })
+
+    const routeTree = rootRoute.addChildren([aboutRoute, indexRoute])
+    const router = createRouter({ routeTree, context: { foo: 'bar' } })
+
+    await router.load()
+
+    // Don't await, simulate user clicking before preload is done
+    router.preloadRoute(aboutRoute)
+
+    await router.navigate(aboutRoute)
+    await router.invalidate()
+
+    // Expect double call: once from preload, once from navigate
+    expect(mock).toHaveBeenCalledTimes(2)
+  })
+
   // Check if context returned by /nested/about, is the same as its parent route /nested on navigate
   test('nested destination on navigate, route context in the /nested/about route is correctly inherited from the /nested parent', async () => {
     const mock = vi.fn()