@tanstack/react-router 0.0.1-beta.191 → 0.0.1-beta.193

package/build/umd/index.development.js

@@ -1246,12 +1246,19 @@
       });
       const matches = matchedRoutes.map((route, index) => {
         const interpolatedPath = interpolatePath(route.path, routeParams);
-        const key = route.options.key ? route.options.key({
-          params: routeParams,
+        const loaderContext = route.options.loaderContext ? route.options.loaderContext({
           search: locationSearch
-        }) ?? '' : '';
-        const stringifiedKey = key ? JSON.stringify(key) : '';
-        const matchId = interpolatePath(route.id, routeParams, true) + stringifiedKey;
+        }) : undefined;
+        const matchId = JSON.stringify([interpolatePath(route.id, routeParams, true), loaderContext].filter(d => d !== undefined), (key, value) => {
+          if (typeof value === 'function') {
+            console.info(route);
+            invariant(false, `Cannot return functions and other non-serializable values from routeOptions.loaderContext! Please use routeOptions.beforeLoad to do this. Route info is logged above 👆`);
+          }
+          if (typeof value === 'object' && value !== null) {
+            return Object.fromEntries(Object.keys(value).sort().map(key => [key, value[key]]));
+          }
+          return value;
+        });
 
         // Waste not, want not. If we already have a match for this route,
         // reuse it. This is important for layout routes, which might stick
@@ -1267,7 +1274,7 @@
         const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
         const routeMatch = {
           id: matchId,
-          key: stringifiedKey,
+          loaderContext,
           routeId: route.id,
           params: routeParams,
           pathname: joinPaths([this.basepath, interpolatedPath]),
@@ -1284,7 +1291,6 @@
           searchError: undefined,
           loaderData: undefined,
           loadPromise: Promise.resolve(),
-          routeContext: undefined,
           context: undefined,
           abortController: new AbortController(),
           fetchedAt: 0
@@ -1341,7 +1347,6 @@
             ...s,
             routeSearch: match.routeSearch,
             search: match.search,
-            routeContext: match.routeContext,
             context: match.context,
             error: match.error,
             paramsError: match.paramsError,
@@ -1386,21 +1391,25 @@
             handleError(match.searchError, 'VALIDATE_SEARCH');
           }
           let didError = false;
+          const parentContext = parentMatch?.context ?? this?.options.context ?? {};
           try {
-            const routeContext = (await route.options.beforeLoad?.({
-              ...match,
+            const beforeLoadContext = (await route.options.beforeLoad?.({
+              abortController: match.abortController,
+              params: match.params,
               preload: !!opts?.preload,
-              parentContext: parentMatch?.routeContext ?? {},
-              context: parentMatch?.context ?? this?.options.context ?? {}
+              context: {
+                ...parentContext,
+                ...match.loaderContext
+              }
             })) ?? {};
             const context = {
-              ...(parentMatch?.context ?? this?.options.context),
-              ...routeContext
+              ...parentContext,
+              ...match.loaderContext,
+              ...beforeLoadContext
             };
             this.setRouteMatch(match.id, s => ({
               ...s,
-              context,
-              routeContext
+              context
             }));
           } catch (err) {
             handleError(err, 'BEFORE_LOAD');
@@ -1454,9 +1463,11 @@
                 }
               }));
               const loaderPromise = route.options.loader?.({
-                ...match,
+                params: match.params,
                 preload: !!opts?.preload,
-                parentMatchPromise
+                parentMatchPromise,
+                abortController: match.abortController,
+                context: match.context
               });
               const [_, loader] = await Promise.all([componentsPromise, loaderPromise]);
               if (latestPromise = checkLatest()) return await latestPromise;
@@ -2558,7 +2569,7 @@
   function useRouteContext(opts) {
     return useMatch({
       ...opts,
-      select: match => opts?.select ? opts.select(match.routeContext) : match.routeContext
+      select: match => opts?.select ? opts.select(match.context) : match.context
     });
   }
   function useSearch(opts) {