@tanstack/react-router 0.0.1-beta.61 → 0.0.1-beta.62

package/build/umd/index.development.js

@@ -89,9 +89,9 @@
       const previous = this.state;
       this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);
       if (this.state === previous) return;
+      this.options?.onUpdate?.(this.state, previous);
       this.queue.push(() => {
         this.listeners.forEach(listener => listener(this.state, previous));
-        this.options?.onUpdate?.(this.state, previous);
       });
       this.#flush();
     };
@@ -577,7 +577,9 @@
       this.options = options || {};
       this.isRoot = !options?.getParentRoute;
     }
-    init = () => {
+    init = opts => {
+      this.originalIndex = opts.originalIndex;
+      this.router = opts.router;
       const allOptions = this.options;
       const isRoot = !allOptions?.path && !allOptions?.id;
       const parent = this.options?.getParentRoute?.();
@@ -625,6 +627,9 @@
     constructor(options) {
       super(options);
     }
+    static withRouterContext = () => {
+      return options => new RootRoute(options);
+    };
   }
 
   // const rootRoute = new RootRoute({
@@ -689,8 +694,13 @@
           routeSearch: {},
           search: {},
           status: 'idle'
+        }, {
+          onUpdate: next => {
+            this.state = next;
+          }
         })
       });
+      this.state = this.store.state;
       if (!this.#hasLoaders()) {
         this.store.setState(s => ({
           ...s,
@@ -698,12 +708,66 @@
         }));
       }
     }
+    #hasLoaders = () => {
+      return !!(this.route.options.onLoad || componentTypes.some(d => this.route.options[d]?.preload));
+    };
+    __init = opts => {
+      // Validate the search params and stabilize them
+      this.parentMatch = opts.parentMatch;
+      const parentSearch = this.parentMatch?.state.search ?? this.router.state.latestLocation.search;
+      try {
+        const validator = typeof this.route.options.validateSearch === 'object' ? this.route.options.validateSearch.parse : this.route.options.validateSearch;
+        let nextSearch = validator?.(parentSearch) ?? {};
+        this.store.setState(s => ({
+          ...s,
+          routeSearch: nextSearch,
+          search: {
+            ...parentSearch,
+            ...nextSearch
+          }
+        }));
+        componentTypes.map(async type => {
+          const component = this.route.options[type];
+          if (typeof this[type] !== 'function') {
+            this[type] = component;
+          }
+        });
+        const parent = this.parentMatch;
+        this.routeContext = this.route.options.getContext?.({
+          parentContext: parent?.routeContext,
+          context: parent?.context,
+          params: this.params,
+          search: this.state.search
+        }) || {};
+        this.context = parent ? {
+          ...parent.context,
+          ...this.routeContext
+        } : {
+          ...this.router?.options.context,
+          ...this.routeContext
+        };
+      } catch (err) {
+        console.error(err);
+        const error = new Error('Invalid search params found', {
+          cause: err
+        });
+        error.code = 'INVALID_SEARCH_PARAMS';
+        this.store.setState(s => ({
+          ...s,
+          status: 'error',
+          error: error
+        }));
+
+        // Do not proceed with loading the route
+        return;
+      }
+    };
     cancel = () => {
       this.abortController?.abort();
     };
     load = async opts => {
       // If the match is invalid, errored or idle, trigger it to load
-      if (this.store.state.status !== 'pending') {
+      if (this.state.status !== 'pending') {
         await this.fetch(opts);
       }
     };
@@ -720,7 +784,7 @@
           // If the match was in an error state, set it
           // to a loading state again. Otherwise, keep it
           // as loading or resolved
-          if (this.store.state.status === 'idle') {
+          if (this.state.status === 'idle') {
             this.store.setState(s => ({
               ...s,
               status: 'pending'
@@ -742,9 +806,11 @@
           if (this.route.options.onLoad) {
             return this.route.options.onLoad({
               params: this.params,
-              search: this.store.state.search,
+              search: this.state.search,
               signal: this.abortController.signal,
-              preload: !!opts?.preload
+              preload: !!opts?.preload,
+              routeContext: this.routeContext,
+              context: this.context
             });
           }
           return;
@@ -772,50 +838,6 @@
       });
       return this.__loadPromise;
     };
-    #hasLoaders = () => {
-      return !!(this.route.options.onLoad || componentTypes.some(d => this.route.options[d]?.preload));
-    };
-    __setParentMatch = parentMatch => {
-      if (!this.parentMatch && parentMatch) {
-        this.parentMatch = parentMatch;
-      }
-    };
-    __validate = () => {
-      // Validate the search params and stabilize them
-      const parentSearch = this.parentMatch?.store.state.search ?? this.router.store.state.latestLocation.search;
-      try {
-        const validator = typeof this.route.options.validateSearch === 'object' ? this.route.options.validateSearch.parse : this.route.options.validateSearch;
-        let nextSearch = validator?.(parentSearch) ?? {};
-        this.store.setState(s => ({
-          ...s,
-          routeSearch: nextSearch,
-          search: {
-            ...parentSearch,
-            ...nextSearch
-          }
-        }));
-        componentTypes.map(async type => {
-          const component = this.route.options[type];
-          if (typeof this[type] !== 'function') {
-            this[type] = component;
-          }
-        });
-      } catch (err) {
-        console.error(err);
-        const error = new Error('Invalid search params found', {
-          cause: err
-        });
-        error.code = 'INVALID_SEARCH_PARAMS';
-        this.store.setState(s => ({
-          ...s,
-          status: 'error',
-          error: error
-        }));
-
-        // Do not proceed with loading the route
-        return;
-      }
-    };
   }
 
   const defaultParseSearch = parseSearchWith(JSON.parse);
@@ -900,7 +922,12 @@
         parseSearch: options?.parseSearch ?? defaultParseSearch,
         fetchServerDataFn: options?.fetchServerDataFn ?? defaultFetchServerDataFn
       };
-      this.store = new Store(getInitialRouterState());
+      this.store = new Store(getInitialRouterState(), {
+        onUpdate: state => {
+          this.state = state;
+        }
+      });
+      this.state = this.store.state;
       this.basepath = '';
       this.update(options);
 
@@ -914,7 +941,7 @@
       // Mount only does anything on the client
       if (!isServer) {
         // If the router matches are empty, load the matches
-        if (!this.store.state.currentMatches.length) {
+        if (!this.state.currentMatches.length) {
           this.load();
         }
         const visibilityChangeEvent = 'visibilitychange';
@@ -953,7 +980,9 @@
           currentLocation: parsedLocation
         }));
         this.#unsubHistory = this.history.listen(() => {
-          this.load(this.#parseLocation(this.store.state.latestLocation));
+          this.load({
+            next: this.#parseLocation(this.state.latestLocation)
+          });
         });
       }
       const {
@@ -979,11 +1008,11 @@
       });
     };
     cancelMatches = () => {
-      [...this.store.state.currentMatches, ...(this.store.state.pendingMatches || [])].forEach(match => {
+      [...this.state.currentMatches, ...(this.state.pendingMatches || [])].forEach(match => {
         match.cancel();
       });
     };
-    load = async next => {
+    load = async opts => {
       let now = Date.now();
       const startedAt = now;
       this.startedLoadingAt = startedAt;
@@ -992,29 +1021,31 @@
       this.cancelMatches();
       let matches;
       this.store.batch(() => {
-        if (next) {
+        if (opts?.next) {
           // Ingest the new location
           this.store.setState(s => ({
             ...s,
-            latestLocation: next
+            latestLocation: opts.next
           }));
         }
 
         // Match the routes
-        matches = this.matchRoutes(this.store.state.latestLocation.pathname, {
+        matches = this.matchRoutes(this.state.latestLocation.pathname, {
           strictParseParams: true
         });
         this.store.setState(s => ({
           ...s,
           status: 'pending',
           pendingMatches: matches,
-          pendingLocation: this.store.state.latestLocation
+          pendingLocation: this.state.latestLocation
         }));
       });
 
       // Load the matches
       try {
-        await this.loadMatches(matches);
+        await this.loadMatches(matches
+        // opts
+        );
       } catch (err) {
         console.warn(err);
         invariant(false, 'Matches failed to load due to error above ☝️. Navigation cancelled!');
@@ -1023,7 +1054,7 @@
         // Ignore side-effects of outdated side-effects
         return this.navigationPromise;
       }
-      const previousMatches = this.store.state.currentMatches;
+      const previousMatches = this.state.currentMatches;
       const exiting = [],
         staying = [];
       previousMatches.forEach(d => {
@@ -1040,11 +1071,11 @@
       exiting.forEach(d => {
         d.__onExit?.({
           params: d.params,
-          search: d.store.state.routeSearch
+          search: d.state.routeSearch
         });
 
         // Clear non-loading error states when match leaves
-        if (d.store.state.status === 'error') {
+        if (d.state.status === 'error') {
           this.store.setState(s => ({
             ...s,
             status: 'idle',
@@ -1055,21 +1086,19 @@
       staying.forEach(d => {
         d.route.options.onTransition?.({
           params: d.params,
-          search: d.store.state.routeSearch
+          search: d.state.routeSearch
         });
       });
       entering.forEach(d => {
         d.__onExit = d.route.options.onLoaded?.({
           params: d.params,
-          search: d.store.state.search
+          search: d.state.search
         });
-        // delete this.store.state.matchCache[d.id] // TODO:
       });
-
       this.store.setState(s => ({
         ...s,
         status: 'idle',
-        currentLocation: this.store.state.latestLocation,
+        currentLocation: this.state.latestLocation,
         currentMatches: matches,
         pendingLocation: undefined,
         pendingMatches: undefined
@@ -1082,7 +1111,7 @@
       invariant(route, `Route with id "${id}" not found`);
       return route;
     };
-    loadRoute = async (navigateOpts = this.store.state.latestLocation) => {
+    loadRoute = async (navigateOpts = this.state.latestLocation) => {
       const next = this.buildNext(navigateOpts);
       const matches = this.matchRoutes(next.pathname, {
         strictParseParams: true
@@ -1090,7 +1119,7 @@
       await this.loadMatches(matches);
       return matches;
     };
-    preloadRoute = async (navigateOpts = this.store.state.latestLocation) => {
+    preloadRoute = async (navigateOpts = this.state.latestLocation) => {
       const next = this.buildNext(navigateOpts);
       const matches = this.matchRoutes(next.pathname, {
         strictParseParams: true
@@ -1105,7 +1134,7 @@
       if (!this.routeTree) {
         return matches;
       }
-      const existingMatches = [...this.store.state.currentMatches, ...(this.store.state.pendingMatches ?? [])];
+      const existingMatches = [...this.state.currentMatches, ...(this.state.pendingMatches ?? [])];
       const findInRouteTree = async routes => {
         const parentMatch = last(matches);
         let params = parentMatch?.params ?? {};
@@ -1151,9 +1180,7 @@
         matchingRoutes.forEach(foundRoute => {
           const interpolatedPath = interpolatePath(foundRoute.path, params);
           const matchId = interpolatePath(foundRoute.id, params, true);
-          const match = existingMatches.find(d => d.id === matchId) ||
-          // this.store.state.matchCache[matchId]?.match || // TODO:
-          new RouteMatch(this, foundRoute, {
+          const match = existingMatches.find(d => d.id === matchId) || new RouteMatch(this, foundRoute, {
             id: matchId,
             params,
             pathname: joinPaths([this.basepath, interpolatedPath])
@@ -1169,14 +1196,8 @@
       findInRouteTree([this.routeTree]);
       return matches;
     };
-    loadMatches = async (resolvedMatches, loaderOpts) => {
-      linkMatches(resolvedMatches);
-
-      // this.cleanMatchCache()
-      resolvedMatches.forEach(async match => {
-        // Validate the match (loads search params etc)
-        match.__validate();
-      });
+    loadMatches = async (resolvedMatches, opts) => {
+      initMatches(resolvedMatches);
 
       // Check each match middleware to see if the route can be accessed
       await Promise.all(resolvedMatches.map(async match => {
@@ -1186,7 +1207,7 @@
             match
           });
         } catch (err) {
-          if (!loaderOpts?.preload) {
+          if (!opts?.preload) {
             match.route.options.onLoadError?.(err);
           }
           throw err;
@@ -1194,14 +1215,16 @@
       }));
       const matchPromises = resolvedMatches.map(async (match, index) => {
         const prevMatch = resolvedMatches[1];
-        const search = match.store.state.search;
-        if (search.__data?.matchId && search.__data.matchId !== match.id) {
-          return;
-        }
+        match.state.search;
+
+        // if (opts?.filter && !opts.filter(match)) {
+        //   return
+        // }
+
         match.load({
-          preload: loaderOpts?.preload
+          preload: opts?.preload
         });
-        if (match.store.state.status !== 'success' && match.__loadPromise) {
+        if (match.state.status !== 'success' && match.__loadPromise) {
           // Wait for the first sign of activity from the match
           await match.__loadPromise;
         }
@@ -1258,15 +1281,15 @@
       };
       const next = this.buildNext(location);
       if (opts?.pending) {
-        if (!this.store.state.pendingLocation) {
+        if (!this.state.pendingLocation) {
           return false;
         }
-        return matchPathname(this.basepath, this.store.state.pendingLocation.pathname, {
+        return matchPathname(this.basepath, this.state.pendingLocation.pathname, {
           ...opts,
           to: next.pathname
         });
       }
-      return matchPathname(this.basepath, this.store.state.currentLocation.pathname, {
+      return matchPathname(this.basepath, this.state.currentLocation.pathname, {
         ...opts,
         to: next.pathname
       });
@@ -1312,11 +1335,11 @@
       const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
 
       // Compare path/hash for matches
-      const pathIsEqual = this.store.state.currentLocation.pathname === next.pathname;
-      const currentPathSplit = this.store.state.currentLocation.pathname.split('/');
+      const pathIsEqual = this.state.currentLocation.pathname === next.pathname;
+      const currentPathSplit = this.state.currentLocation.pathname.split('/');
       const nextPathSplit = next.pathname.split('/');
       const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-      const hashIsEqual = this.store.state.currentLocation.hash === next.hash;
+      const hashIsEqual = this.state.currentLocation.hash === next.hash;
       // Combine the matches based on user options
       const pathTest = activeOptions?.exact ? pathIsEqual : pathIsFuzzyEqual;
       const hashTest = activeOptions?.includeHash ? hashIsEqual : true;
@@ -1379,21 +1402,18 @@
     dehydrate = () => {
       return {
         state: {
-          ...pick(this.store.state, ['latestLocation', 'currentLocation', 'status', 'lastUpdated']),
-          currentMatches: this.store.state.currentMatches.map(match => ({
+          ...pick(this.state, ['latestLocation', 'currentLocation', 'status', 'lastUpdated']),
+          currentMatches: this.state.currentMatches.map(match => ({
             id: match.id,
             state: {
-              ...pick(match.store.state, ['status'])
+              status: match.state.status
             }
           }))
-        },
-        context: this.options.context
+        }
       };
     };
     hydrate = dehydratedRouter => {
       this.store.setState(s => {
-        this.options.context = dehydratedRouter.context;
-
         // Match the routes
         const currentMatches = this.matchRoutes(dehydratedRouter.state.latestLocation.pathname, {
           strictParseParams: true
@@ -1406,7 +1426,7 @@
             ...dehydratedMatch.state
           }));
         });
-        currentMatches.forEach(match => match.__validate());
+        initMatches(currentMatches);
         return {
           ...s,
           ...dehydratedRouter.state,
@@ -1417,9 +1437,10 @@
     #buildRouteTree = routeTree => {
       const recurseRoutes = routes => {
         routes.forEach((route, i) => {
-          route.init();
-          route.originalIndex = i;
-          route.router = this;
+          route.init({
+            originalIndex: i,
+            router: this
+          });
           const existingRoute = this.routesById[route.id];
           if (existingRoute) {
             {
@@ -1457,9 +1478,9 @@
       this.load();
     };
     #buildLocation = (dest = {}) => {
-      const fromPathname = dest.fromCurrent ? this.store.state.latestLocation.pathname : dest.from ?? this.store.state.latestLocation.pathname;
+      const fromPathname = dest.fromCurrent ? this.state.latestLocation.pathname : dest.from ?? this.state.latestLocation.pathname;
       let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? '.'}`);
-      const fromMatches = this.matchRoutes(this.store.state.latestLocation.pathname, {
+      const fromMatches = this.matchRoutes(this.state.latestLocation.pathname, {
         strictParseParams: true
       });
       const toMatches = this.matchRoutes(pathname);
@@ -1475,7 +1496,7 @@
       pathname = interpolatePath(pathname, nextParams ?? {});
 
       // Pre filters first
-      const preFilteredSearch = dest.__preSearchFilters?.length ? dest.__preSearchFilters?.reduce((prev, next) => next(prev), this.store.state.latestLocation.search) : this.store.state.latestLocation.search;
+      const preFilteredSearch = dest.__preSearchFilters?.length ? dest.__preSearchFilters?.reduce((prev, next) => next(prev), this.state.latestLocation.search) : this.state.latestLocation.search;
 
       // Then the link/navigate function
       const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
@@ -1485,15 +1506,15 @@
 
       // Then post filters
       const postFilteredSearch = dest.__postSearchFilters?.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-      const search = replaceEqualDeep(this.store.state.latestLocation.search, postFilteredSearch);
+      const search = replaceEqualDeep(this.state.latestLocation.search, postFilteredSearch);
       const searchStr = this.options.stringifySearch(search);
-      let hash = dest.hash === true ? this.store.state.latestLocation.hash : functionalUpdate(dest.hash, this.store.state.latestLocation.hash);
+      let hash = dest.hash === true ? this.state.latestLocation.hash : functionalUpdate(dest.hash, this.state.latestLocation.hash);
       hash = hash ? `#${hash}` : '';
       return {
         pathname,
         search,
         searchStr,
-        state: this.store.state.latestLocation.state,
+        state: this.state.latestLocation.state,
         hash,
         href: `${pathname}${searchStr}${hash}`,
         key: dest.key
@@ -1507,7 +1528,7 @@
       if (!location.replace) {
         nextAction = 'push';
       }
-      const isSameUrl = this.store.state.latestLocation.href === next.href;
+      const isSameUrl = this.state.latestLocation.href === next.href;
       if (isSameUrl && !next.key) {
         nextAction = 'replace';
       }
@@ -1517,7 +1538,7 @@
         ...next.state
       });
 
-      // this.load(this.#parseLocation(this.store.state.latestLocation))
+      // this.load(this.#parseLocation(this.state.latestLocation))
 
       return this.navigationPromise = new Promise(resolve => {
         const previousNavigationResolve = this.resolveNavigation;
@@ -1543,12 +1564,12 @@
   function isCtrlEvent(e) {
     return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
   }
-  function linkMatches(matches) {
+  function initMatches(matches) {
     matches.forEach((match, index) => {
-      const parent = matches[index - 1];
-      if (parent) {
-        match.__setParentMatch(parent);
-      }
+      const parentMatch = matches[index - 1];
+      match.__init({
+        parentMatch
+      });
     });
   }
 
@@ -1624,7 +1645,7 @@
   //
 
   function useLinkProps(options) {
-    const router = useRouter();
+    const router = useRouterContext();
     const {
       // custom props
       type,
@@ -1749,7 +1770,7 @@
     ...rest
   }) {
     router.update(rest);
-    const currentMatches = useStore(router.store, s => s.currentMatches, undefined);
+    const currentMatches = useStore(router.store, s => s.currentMatches);
     React__namespace.useEffect(router.mount, [router]);
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: {
@@ -1759,22 +1780,24 @@
       value: [undefined, ...currentMatches]
     }, /*#__PURE__*/React__namespace.createElement(Outlet, null))));
   }
-  function useRouter() {
+  function useRouterContext() {
     const value = React__namespace.useContext(routerContext);
     warning(!value, 'useRouter must be used inside a <Router> component!');
+    useStore(value.router.store);
     return value.router;
   }
-  function useRouterStore(selector, shallow) {
-    const router = useRouter();
-    return useStore(router.store, selector, shallow);
+  function useRouter(track, shallow) {
+    const router = useRouterContext();
+    useStore(router.store, track, shallow);
+    return router;
   }
   function useMatches() {
     return React__namespace.useContext(matchesContext);
   }
   function useMatch(opts) {
-    const router = useRouter();
+    const router = useRouterContext();
     const nearestMatch = useMatches()[0];
-    const match = opts?.from ? router.store.state.currentMatches.find(d => d.route.id === opts?.from) : nearestMatch;
+    const match = opts?.from ? router.state.currentMatches.find(d => d.route.id === opts?.from) : nearestMatch;
     invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
     if (opts?.strict ?? true) {
       invariant(nearestMatch.route.id == match?.route.id, `useMatch("${match?.route.id}") is being called in a component that is meant to render the '${nearestMatch.route.id}' route. Did you mean to 'useMatch("${match?.route.id}", { strict: false })' or 'useRoute("${match?.route.id}")' instead?`);
@@ -1783,26 +1806,26 @@
     return match;
   }
   function useRoute(routeId) {
-    const router = useRouter();
+    const router = useRouterContext();
     const resolvedRoute = router.getRoute(routeId);
     invariant(resolvedRoute, `Could not find a route for route "${routeId}"! Did you forget to add it to your route config?`);
     return resolvedRoute;
   }
   function useSearch(opts) {
     const match = useMatch(opts);
-    useStore(match.store, d => opts?.track?.(d.search) ?? d.search);
-    return match.store.state.search;
+    useStore(match.store, d => opts?.track?.(d.search) ?? d.search, true);
+    return match.state.search;
   }
   function useParams(opts) {
-    const router = useRouter();
+    const router = useRouterContext();
     useStore(router.store, d => {
       const params = last(d.currentMatches)?.params;
       return opts?.track?.(params) ?? params;
-    });
-    return last(router.store.state.currentMatches)?.params;
+    }, true);
+    return last(router.state.currentMatches)?.params;
   }
   function useNavigate(defaultOpts) {
-    const router = useRouter();
+    const router = useRouterContext();
     return opts => {
       return router.navigate({
         ...defaultOpts,
@@ -1811,7 +1834,7 @@
     };
   }
   function useMatchRoute() {
-    const router = useRouter();
+    const router = useRouterContext();
     return opts => {
       const {
         pending,
@@ -1850,17 +1873,17 @@
     matches,
     match
   }) {
-    const router = useRouter();
-    useStore(match.store);
+    const router = useRouterContext();
+    useStore(match.store, store => [store.status, store.error], true);
     const defaultPending = React__namespace.useCallback(() => null, []);
     const Inner = React__namespace.useCallback(props => {
-      if (props.match.store.state.status === 'error') {
-        throw props.match.store.state.error;
+      if (props.match.state.status === 'error') {
+        throw props.match.state.error;
       }
-      if (props.match.store.state.status === 'success') {
+      if (props.match.state.status === 'success') {
         return /*#__PURE__*/React__namespace.createElement(props.match.component ?? router.options.defaultComponent ?? Outlet);
       }
-      if (props.match.store.state.status === 'pending') {
+      if (props.match.state.status === 'pending') {
         throw props.match.__loadPromise;
       }
       invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
@@ -1869,7 +1892,7 @@
     const errorComponent = match.errorComponent ?? router.options.defaultErrorComponent;
     return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
       value: matches
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+    }, match.route.options.wrapInSuspense ?? true ? /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
       fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, null)
     }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
       key: match.route.id,
@@ -1877,7 +1900,13 @@
       match: match
     }, /*#__PURE__*/React__namespace.createElement(Inner, {
       match: match
-    }))));
+    }))) : /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+      key: match.route.id,
+      errorComponent: errorComponent,
+      match: match
+    }, /*#__PURE__*/React__namespace.createElement(Inner, {
+      match: match
+    })));
   }
 
   // This is the messiest thing ever... I'm either seriously tired (likely) or
@@ -1906,17 +1935,17 @@
   }
   function CatchBoundaryInner(props) {
     const [activeErrorState, setActiveErrorState] = React__namespace.useState(props.errorState);
-    const router = useRouter();
+    const router = useRouterContext();
     const errorComponent = props.errorComponent ?? DefaultErrorBoundary;
     const prevKeyRef = React__namespace.useRef('');
     React__namespace.useEffect(() => {
       if (activeErrorState) {
-        if (router.store.state.currentLocation.key !== prevKeyRef.current) {
+        if (router.state.currentLocation.key !== prevKeyRef.current) {
           setActiveErrorState({});
         }
       }
-      prevKeyRef.current = router.store.state.currentLocation.key;
-    }, [activeErrorState, router.store.state.currentLocation.key]);
+      prevKeyRef.current = router.state.currentLocation.key;
+    }, [activeErrorState, router.state.currentLocation.key]);
     React__namespace.useEffect(() => {
       if (props.errorState.error) {
         setActiveErrorState(props.errorState);
@@ -2030,7 +2059,7 @@
   exports.useParams = useParams;
   exports.useRoute = useRoute;
   exports.useRouter = useRouter;
-  exports.useRouterStore = useRouterStore;
+  exports.useRouterContext = useRouterContext;
   exports.useSearch = useSearch;
   exports.useStore = useStore;
   exports.warning = warning;