fix(react-router): parentMatchPromiseresolves to parent match (#2666)

docs/framework/react/guide/data-loading.md

@@ -78,7 +78,7 @@ The `loader` function receives a single object with the following properties:
 - `deps` - The object value returned from the `Route.loaderDeps` function. If `Route.loaderDeps` is not defined, an empty object will be provided instead.
 - `location` - The current location
 - `params` - The route's path params
-- `parentMatchPromise` - `Promise<void>` or `undefined`
+- `parentMatchPromise` - `Promise<RouteMatch>` or `undefined`
 - `preload` - Boolean which is `true` when the route is being preloaded instead of loaded
 - `route` - The route itself
 

packages/react-router/src/Matches.tsx

@@ -121,6 +121,16 @@ export const isMatch = <TMatch, TPath extends string>(
   return value != null
 }
 
+export type MakeRouteMatchFromRoute<TRoute extends AnyRoute> = RouteMatch<
+  TRoute['types']['id'],
+  TRoute['types']['fullPath'],
+  TRoute['types']['allParams'],
+  TRoute['types']['fullSearchSchema'],
+  TRoute['types']['loaderData'],
+  TRoute['types']['allContext'],
+  TRoute['types']['loaderDeps']
+>
+
 export interface RouteMatch<
   TRouteId,
   TFullPath,

packages/react-router/src/route.ts

@@ -11,7 +11,12 @@ import { rootRouteId } from './root'
 import type * as React from 'react'
 import type { RootRouteId } from './root'
 import type { UseNavigateResult } from './useNavigate'
-import type { MakeRouteMatch, MakeRouteMatchUnion, RouteMatch } from './Matches'
+import type {
+  MakeRouteMatch,
+  MakeRouteMatchFromRoute,
+  MakeRouteMatchUnion,
+  RouteMatch,
+} from './Matches'
 import type { NavigateOptions, ParsePathParams, ToMaskOptions } from './link'
 import type { ParsedLocation } from './location'
 import type { RouteById, RouteIds, RoutePaths } from './routeInfo'
@@ -591,7 +596,7 @@ export interface LoaderFnContext<
    * @deprecated Use `throw redirect({ to: '/somewhere' })` instead
    **/
   navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-  parentMatchPromise?: Promise<void>
+  parentMatchPromise?: Promise<MakeRouteMatchFromRoute<TParentRoute>>
   cause: 'preload' | 'enter' | 'stay'
   route: Route
 }

packages/react-router/src/router.ts

@@ -2299,7 +2299,7 @@ export class Router<
             }
 
             const validResolvedMatches = matches.slice(0, firstBadMatchIndex)
-            const matchPromises: Array<Promise<any>> = []
+            const matchPromises: Array<Promise<AnyRouteMatch>> = []
 
             validResolvedMatches.forEach(({ id: matchId, routeId }, index) => {
               matchPromises.push(
@@ -2535,6 +2535,7 @@ export class Router<
                     loaderPromise: undefined,
                     invalid: false,
                   }))
+                  return this.getMatch(matchId)!
                 })(),
               )
             })

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

@@ -134,14 +134,17 @@ describe('loaders parentMatchPromise', () => {
       path: '/nested',
       loader: async () => {
         await sleep(WAIT_TIME)
+        return 'nested'
       },
       component: () => <Outlet />,
     })
     const fooRoute = createRoute({
       getParentRoute: () => nestedRoute,
       path: '/foo',
-      loader: ({ parentMatchPromise }) => {
+      loader: async ({ parentMatchPromise }) => {
         nestedLoaderMock(parentMatchPromise)
+        const parentMatch = await parentMatchPromise
+        expect(parentMatch?.loaderData).toBe('nested')
       },
       component: () => <div>Nested Foo page</div>,
     })

packages/react-router/tests/route.test-d.tsx

@@ -16,7 +16,11 @@ import type {
   Route,
   SearchSchemaInput,
 } from '../src'
-import type { MakeRouteMatchUnion } from '../src/Matches'
+import type {
+  MakeRouteMatch,
+  MakeRouteMatchFromRoute,
+  MakeRouteMatchUnion,
+} from '../src/Matches'
 
 test('when creating the root', () => {
   const rootRoute = createRootRoute()
@@ -83,7 +87,7 @@ test('when creating the root with a loader', () => {
         context: {}
         location: ParsedLocation
         navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-        parentMatchPromise?: Promise<void>
+        parentMatchPromise?: Promise<MakeRouteMatch>
         cause: 'preload' | 'enter' | 'stay'
         route: Route
       }>()
@@ -178,7 +182,7 @@ test('when creating the root route with context and a loader', () => {
         context: { userId: string }
         location: ParsedLocation
         navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-        parentMatchPromise?: Promise<void>
+        parentMatchPromise?: Promise<MakeRouteMatch>
         cause: 'preload' | 'enter' | 'stay'
         route: Route
       }>()
@@ -246,7 +250,7 @@ test('when creating the root route with context, routeContext, beforeLoad and a
         context: { userId: string; permission: 'view'; env: 'env1' }
         location: ParsedLocation
         navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-        parentMatchPromise?: Promise<void>
+        parentMatchPromise?: Promise<MakeRouteMatch>
         cause: 'preload' | 'enter' | 'stay'
         route: Route
       }>()
@@ -374,7 +378,7 @@ test('when creating a child route with a loader from the root route', () => {
         context: {}
         location: ParsedLocation
         navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-        parentMatchPromise?: Promise<void>
+        parentMatchPromise?: Promise<MakeRouteMatchFromRoute<typeof rootRoute>>
         cause: 'preload' | 'enter' | 'stay'
         route: Route
       }>()
@@ -416,7 +420,7 @@ test('when creating a child route with a loader from the root route with context
         context: { userId: string }
         location: ParsedLocation
         navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-        parentMatchPromise?: Promise<void>
+        parentMatchPromise?: Promise<MakeRouteMatchFromRoute<typeof rootRoute>>
         cause: 'preload' | 'enter' | 'stay'
         route: Route
       }>()
@@ -549,7 +553,7 @@ test('when creating a child route with params, search and loader from the root r
         context: {}
         location: ParsedLocation
         navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-        parentMatchPromise?: Promise<void>
+        parentMatchPromise?: Promise<MakeRouteMatchFromRoute<typeof rootRoute>>
         cause: 'preload' | 'enter' | 'stay'
         route: Route
       }>
@@ -574,7 +578,7 @@ test('when creating a child route with params, search, loader and loaderDeps fro
         context: {}
         location: ParsedLocation
         navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-        parentMatchPromise?: Promise<void>
+        parentMatchPromise?: Promise<MakeRouteMatchFromRoute<typeof rootRoute>>
         cause: 'preload' | 'enter' | 'stay'
         route: Route
       }>(),
@@ -598,7 +602,7 @@ test('when creating a child route with params, search, loader and loaderDeps fro
         context: { userId: string }
         location: ParsedLocation
         navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-        parentMatchPromise?: Promise<void>
+        parentMatchPromise?: Promise<MakeRouteMatchFromRoute<typeof rootRoute>>
         cause: 'preload' | 'enter' | 'stay'
         route: Route
       }>(),
@@ -701,7 +705,7 @@ test('when creating a child route with params, search with routeContext, beforeL
         context: { userId: string; env: string; readonly permission: 'view' }
         location: ParsedLocation
         navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-        parentMatchPromise?: Promise<void>
+        parentMatchPromise?: Promise<MakeRouteMatchFromRoute<typeof rootRoute>>
         cause: 'preload' | 'enter' | 'stay'
         route: Route
       }>()
@@ -1030,7 +1034,9 @@ test('when creating a child route with routeContext, beforeLoad, search, params,
         }
         location: ParsedLocation
         navigate: (opts: NavigateOptions<AnyRouter>) => Promise<void>
-        parentMatchPromise?: Promise<void>
+        parentMatchPromise?: Promise<
+          MakeRouteMatchFromRoute<typeof detailsRoute>
+        >
         cause: 'preload' | 'enter' | 'stay'
         route: Route
       }>(),