@tanstack/react-router 0.0.1-beta.184 → 0.0.1-beta.186

package/build/umd/index.development.js

@@ -236,11 +236,13 @@
         };
       },
       push: (path, state) => {
+        assignKey(state);
         queueTask(() => {
           opts.pushState(path, state);
         });
       },
       replace: (path, state) => {
+        assignKey(state);
         queueTask(() => {
           opts.replaceState(path, state);
         });
@@ -277,10 +279,20 @@
       }
     };
   }
+  function assignKey(state) {
+    state.key = createRandomKey();
+    // if (state.__actualLocation) {
+    //   state.__actualLocation.state = {
+    //     ...state.__actualLocation.state,
+    //     key,
+    //   }
+    // }
+  }
+
   function createBrowserHistory(opts) {
     const getHref = opts?.getHref ?? (() => `${window.location.pathname}${window.location.search}${window.location.hash}`);
     const createHref = opts?.createHref ?? (path => path);
-    const getLocation = () => parseLocation(getHref(), history.state);
+    const getLocation = () => parseLocation(getHref(), window.history.state);
     return createHistory({
       getLocation,
       subscriber: onUpdate => {
@@ -306,16 +318,10 @@
         };
       },
       pushState: (path, state) => {
-        window.history.pushState({
-          ...state,
-          key: createRandomKey()
-        }, '', createHref(path));
+        window.history.pushState(state, '', createHref(path));
       },
       replaceState: (path, state) => {
-        window.history.replaceState({
-          ...state,
-          key: createRandomKey()
-        }, '', createHref(path));
+        window.history.replaceState(state, '', createHref(path));
       },
       back: () => window.history.back(),
       forward: () => window.history.forward(),
@@ -334,24 +340,20 @@
   }) {
     const entries = opts.initialEntries;
     let index = opts.initialIndex ?? entries.length - 1;
-    let currentState = {};
+    let currentState = {
+      key: createRandomKey()
+    };
     const getLocation = () => parseLocation(entries[index], currentState);
     return createHistory({
       getLocation,
       subscriber: false,
       pushState: (path, state) => {
-        currentState = {
-          ...state,
-          key: createRandomKey()
-        };
+        currentState = state;
         entries.push(path);
         index++;
       },
       replaceState: (path, state) => {
-        currentState = {
-          ...state,
-          key: createRandomKey()
-        };
+        currentState = state;
         entries[index] = path;
       },
       back: () => {
@@ -372,7 +374,7 @@
       pathname: href.substring(0, hashIndex > 0 ? searchIndex > 0 ? Math.min(hashIndex, searchIndex) : hashIndex : searchIndex > 0 ? searchIndex : href.length),
       hash: hashIndex > -1 ? href.substring(hashIndex) : '',
       search: searchIndex > -1 ? href.slice(searchIndex, hashIndex === -1 ? undefined : hashIndex) : '',
-      state
+      state: state || {}
     };
   }
 
@@ -381,6 +383,21 @@
     return (Math.random() + 1).toString(36).substring(7);
   }
 
+  // type Compute<T> = { [K in keyof T]: T[K] } | never
+
+  // type AllKeys<T> = T extends any ? keyof T : never
+
+  // export type MergeUnion<T, Keys extends keyof T = keyof T> = Compute<
+  //   {
+  //     [K in Keys]: T[Keys]
+  //   } & {
+  //     [K in AllKeys<T>]?: T extends any
+  //       ? K extends keyof T
+  //         ? T[K]
+  //         : never
+  //       : never
+  //   }
+  // >
   function last(arr) {
     return arr[arr.length - 1];
   }
@@ -790,6 +807,9 @@
       super(options);
     }
   }
+  function createRouteMask(opts) {
+    return opts;
+  }
 
   class FileRoute {
     constructor(path) {
@@ -873,6 +893,9 @@
   class Router {
     #unsubHistory;
     resetNextScroll = false;
+    tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
+    // nextTemporaryLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>
+
     constructor(options) {
       this.options = {
         defaultPreloadDelay: 50,
@@ -921,15 +944,15 @@
       });
       this.state = this.__store.state;
       this.update(options);
-      const next = this.buildNext({
-        hash: true,
-        fromCurrent: true,
+      const nextLocation = this.buildLocation({
         search: true,
+        params: true,
+        hash: true,
         state: true
       });
-      if (this.state.location.href !== next.href) {
+      if (this.state.location.href !== nextLocation.href) {
         this.#commitLocation({
-          ...next,
+          ...nextLocation,
           replace: true
         });
       }
@@ -972,8 +995,10 @@
       };
     };
     #onFocus = () => {
-      if (this.options.refetchOnWindowFocus ?? true) {
-        this.invalidate();
+      if (this.options.reloadOnWindowFocus ?? true) {
+        this.invalidate({
+          __fromFocus: true
+        });
       }
     };
     update = opts => {
@@ -1012,14 +1037,6 @@
       }
       return this;
     };
-    buildNext = opts => {
-      const next = this.#buildLocation(opts);
-      const __matches = this.matchRoutes(next.pathname, next.search);
-      return this.#buildLocation({
-        ...opts,
-        __matches
-      });
-    };
     cancelMatches = () => {
       this.state.matches.forEach(match => {
         this.cancelMatch(match.id);
@@ -1078,7 +1095,7 @@
         try {
           // Load the matches
           try {
-            await this.loadMatches(pendingMatches);
+            await this.loadMatches(pendingMatches.map(d => d.id));
           } catch (err) {
             // swallow this error, since we'll display the
             // errors on the route components
@@ -1127,10 +1144,19 @@
       return this.latestLoadPromise;
     };
     #mergeMatches = (prevMatchesById, nextMatches) => {
-      return {
-        ...prevMatchesById,
-        ...Object.fromEntries(nextMatches.map(match => [match.id, match]))
+      let matchesById = {
+        ...prevMatchesById
       };
+      nextMatches.forEach(match => {
+        if (!matchesById[match.id]) {
+          matchesById[match.id] = match;
+        }
+        matchesById[match.id] = {
+          ...matchesById[match.id],
+          ...match
+        };
+      });
+      return matchesById;
     };
     getRoute = id => {
       const route = this.routesById[id];
@@ -1138,7 +1164,7 @@
       return route;
     };
     preloadRoute = async (navigateOpts = this.state.location) => {
-      const next = this.buildNext(navigateOpts);
+      let next = this.buildLocation(navigateOpts);
       const matches = this.matchRoutes(next.pathname, next.search, {
         throwOnError: true
       });
@@ -1148,11 +1174,11 @@
           matchesById: this.#mergeMatches(s.matchesById, matches)
         };
       });
-      await this.loadMatches(matches, {
+      await this.loadMatches(matches.map(d => d.id), {
         preload: true,
         maxAge: navigateOpts.maxAge
       });
-      return matches;
+      return [last(matches), matches];
     };
     cleanMatches = () => {
       const now = Date.now();
@@ -1306,8 +1332,8 @@
       });
       return matches;
     };
-    loadMatches = async (_resolvedMatches, opts) => {
-      const getFreshMatches = () => _resolvedMatches.map(d => this.getRouteMatch(d.id));
+    loadMatches = async (matchIds, opts) => {
+      const getFreshMatches = () => matchIds.map(d => this.getRouteMatch(d));
       if (!opts?.preload) {
         getFreshMatches().forEach(match => {
           // Update each match with its latest route data
@@ -1387,8 +1413,9 @@
           }
         }
       } catch (err) {
-        if (!opts?.preload) {
-          this.navigate(err);
+        if (isRedirect(err)) {
+          if (!opts?.preload) this.navigate(err);
+          return;
         }
         throw err;
       }
@@ -1497,13 +1524,13 @@
         isExternal = true;
       } catch (e) {}
       invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
-      return this.#commitLocation({
+      return this.#buildAndCommitLocation({
         from: fromString,
         to: toString,
         search,
         hash,
-        replace,
         params,
+        replace,
         resetScroll
       });
     };
@@ -1512,7 +1539,7 @@
         ...location,
         to: location.to ? this.resolvePath(location.from ?? '', location.to) : undefined
       };
-      const next = this.buildNext(location);
+      const next = this.buildLocation(location);
       if (opts?.pending && this.state.status !== 'pending') {
         return false;
       }
@@ -1545,6 +1572,7 @@
       preloadDelay: userPreloadDelay,
       disabled,
       state,
+      mask,
       resetScroll
     }) => {
       // If this link simply reloads the current route,
@@ -1568,9 +1596,10 @@
         hash,
         replace,
         state,
+        mask,
         resetScroll
       };
-      const next = this.buildNext(nextOpts);
+      const next = this.buildLocation(nextOpts);
       preload = preload ?? this.options.defaultPreload;
       const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
 
@@ -1592,7 +1621,11 @@
           e.preventDefault();
 
           // All is well? Navigate!
-          this.#commitLocation(nextOpts);
+          this.#commitLocation({
+            ...next,
+            replace,
+            resetScroll
+          });
         }
       };
 
@@ -1805,84 +1838,174 @@
       });
     };
     #parseLocation = previousLocation => {
-      let {
+      const parse = ({
         pathname,
         search,
         hash,
         state
-      } = this.history.location;
-      const parsedSearch = this.options.parseSearch(search);
-      return {
-        pathname: pathname,
-        searchStr: search,
-        search: replaceEqualDeep(previousLocation?.search, parsedSearch),
-        hash: hash.split('#').reverse()[0] ?? '',
-        href: `${pathname}${search}${hash}`,
-        state: state,
-        key: state?.key || '__init__'
+      }) => {
+        const parsedSearch = this.options.parseSearch(search);
+        return {
+          pathname: pathname,
+          searchStr: search,
+          search: replaceEqualDeep(previousLocation?.search, parsedSearch),
+          hash: hash.split('#').reverse()[0] ?? '',
+          href: `${pathname}${search}${hash}`,
+          state: replaceEqualDeep(previousLocation?.state, state)
+        };
       };
+      const location = parse(this.history.location);
+      let {
+        __tempLocation,
+        __tempKey
+      } = location.state;
+      if (__tempLocation && (!__tempKey || __tempKey === this.tempLocationKey)) {
+        // Sync up the location keys
+        const parsedTempLocation = parse(__tempLocation);
+        parsedTempLocation.state.key = location.state.key;
+        delete parsedTempLocation.state.__tempLocation;
+        return {
+          ...parsedTempLocation,
+          maskedLocation: location
+        };
+      }
+      return location;
     };
-    #buildLocation = (dest = {}) => {
-      dest.fromCurrent = dest.fromCurrent ?? dest.to === '';
-      const fromPathname = dest.fromCurrent ? this.state.location.pathname : dest.from ?? this.state.location.pathname;
-      let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? ''}`);
-      const fromMatches = this.matchRoutes(this.state.location.pathname, this.state.location.search);
-      const prevParams = {
-        ...last(fromMatches)?.params
+    buildLocation = (opts = {}) => {
+      const build = (dest = {}, matches) => {
+        const from = this.state.location;
+        const fromPathname = dest.from ?? from.pathname;
+        let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? ''}`);
+        const fromMatches = this.matchRoutes(from.pathname, from.search);
+        const prevParams = {
+          ...last(fromMatches)?.params
+        };
+        let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+        if (nextParams) {
+          matches?.map(d => this.getRoute(d.routeId).options.stringifyParams).filter(Boolean).forEach(fn => {
+            nextParams = {
+              ...nextParams,
+              ...fn(nextParams)
+            };
+          });
+        }
+        pathname = interpolatePath(pathname, nextParams ?? {});
+        const preSearchFilters = matches?.map(match => this.getRoute(match.routeId).options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+        const postSearchFilters = matches?.map(match => this.getRoute(match.routeId).options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
+
+        // Pre filters first
+        const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), from.search) : from.search;
+
+        // Then the link/navigate function
+        const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+        : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+        : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
+        : {};
+
+        // Then post filters
+        const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+        const search = replaceEqualDeep(from.search, postFilteredSearch);
+        const searchStr = this.options.stringifySearch(search);
+        const hash = dest.hash === true ? from.hash : dest.hash ? functionalUpdate(dest.hash, from.hash) : from.hash;
+        const hashStr = hash ? `#${hash}` : '';
+        let nextState = dest.state === true ? from.state : dest.state ? functionalUpdate(dest.state, from.state) : from.state;
+        nextState = replaceEqualDeep(from.state, nextState);
+        return {
+          pathname,
+          search,
+          searchStr,
+          state: nextState,
+          hash,
+          href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
+          unmaskOnReload: dest.unmaskOnReload
+        };
       };
-      let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
-      if (nextParams) {
-        dest.__matches?.map(d => this.getRoute(d.routeId).options.stringifyParams).filter(Boolean).forEach(fn => {
-          nextParams = {
-            ...nextParams,
-            ...fn(nextParams)
-          };
+      const buildWithMatches = (dest = {}, maskedDest) => {
+        let next = build(dest);
+        let maskedNext = maskedDest ? build(maskedDest) : undefined;
+        if (!maskedNext) {
+          const foundMask = this.options.routeMasks?.find(d => {
+            const match = matchPathname(this.basepath, next.pathname, {
+              to: d.from,
+              fuzzy: false
+            });
+            if (match) {
+              return match;
+            }
+            return false;
+          });
+          if (foundMask) {
+            maskedDest = foundMask;
+            maskedNext = build(maskedDest);
+          }
+        }
+        const nextMatches = this.matchRoutes(next.pathname, next.search);
+        const maskedMatches = maskedNext ? this.matchRoutes(maskedNext.pathname, maskedNext.search) : undefined;
+        const maskedFinal = maskedNext ? build(maskedDest, maskedMatches) : undefined;
+        const final = build(dest, nextMatches);
+        if (maskedFinal) {
+          final.maskedLocation = maskedFinal;
+        }
+        return final;
+      };
+      if (opts.mask) {
+        return buildWithMatches(opts, {
+          ...pick(opts, ['from']),
+          ...opts.mask
         });
       }
-      pathname = interpolatePath(pathname, nextParams ?? {});
-      const preSearchFilters = dest.__matches?.map(match => this.getRoute(match.routeId).options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
-      const postSearchFilters = dest.__matches?.map(match => this.getRoute(match.routeId).options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
-
-      // Pre filters first
-      const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), this.state.location.search) : this.state.location.search;
-
-      // Then the link/navigate function
-      const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-      : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
-      : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
-      : {};
-
-      // Then post filters
-      const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-      const search = replaceEqualDeep(this.state.location.search, postFilteredSearch);
-      const searchStr = this.options.stringifySearch(search);
-      const hash = dest.hash === true ? this.state.location.hash : functionalUpdate(dest.hash, this.state.location.hash);
-      const hashStr = hash ? `#${hash}` : '';
-      const nextState = dest.state === true ? this.state.location.state : functionalUpdate(dest.state, this.state.location.state);
-      return {
-        pathname,
-        search,
-        searchStr,
-        state: nextState,
-        hash,
-        href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
-        key: dest.key
-      };
+      return buildWithMatches(opts);
     };
-    #commitLocation = async location => {
-      const next = this.buildNext(location);
+    #buildAndCommitLocation = ({
+      replace,
+      resetScroll,
+      ...rest
+    } = {}) => {
+      const location = this.buildLocation(rest);
+      return this.#commitLocation({
+        ...location,
+        replace,
+        resetScroll
+      });
+    };
+    #commitLocation = async next => {
       if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
       let nextAction = 'replace';
-      if (!location.replace) {
+      if (!next.replace) {
         nextAction = 'push';
       }
       const isSameUrl = this.state.location.href === next.href;
-      if (isSameUrl && !next.key) {
+      if (isSameUrl) {
         nextAction = 'replace';
       }
-      const href = `${next.pathname}${next.searchStr}${next.hash ? `#${next.hash}` : ''}`;
-      this.history[nextAction === 'push' ? 'push' : 'replace'](href, next.state);
-      this.resetNextScroll = location.resetScroll ?? true;
+      let {
+        maskedLocation,
+        ...nextHistory
+      } = next;
+      if (maskedLocation) {
+        nextHistory = {
+          ...maskedLocation,
+          state: {
+            ...maskedLocation.state,
+            __tempKey: undefined,
+            __tempLocation: {
+              ...nextHistory,
+              search: nextHistory.searchStr,
+              state: {
+                ...nextHistory.state,
+                __tempKey: undefined,
+                __tempLocation: undefined,
+                key: undefined
+              }
+            }
+          }
+        };
+        if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
+          nextHistory.state.__tempKey = this.tempLocationKey;
+        }
+      }
+      this.history[nextAction === 'push' ? 'push' : 'replace'](nextHistory.href, nextHistory.state);
+      this.resetNextScroll = next.resetScroll ?? true;
       return this.latestLoadPromise;
     };
     getRouteMatch = id => {
@@ -1931,25 +2054,26 @@
         if (childMatch) {
           return this.invalidate({
             matchId: childMatch.id,
-            reload: false
+            reload: false,
+            __fromFocus: opts.__fromFocus
           });
         }
       } else {
         this.__store.batch(() => {
           Object.values(this.state.matchesById).forEach(match => {
-            this.setRouteMatch(match.id, s => ({
-              ...s,
-              invalid: true
-            }));
+            const route = this.getRoute(match.routeId);
+            const shouldInvalidate = opts?.__fromFocus ? route.options.reloadOnWindowFocus ?? true : true;
+            if (shouldInvalidate) {
+              this.setRouteMatch(match.id, s => ({
+                ...s,
+                invalid: true
+              }));
+            }
           });
         });
       }
       if (opts?.reload ?? true) {
-        return this.navigate({
-          fromCurrent: true,
-          replace: true,
-          search: true
-        });
+        return this.load();
       }
     };
   }
@@ -2016,7 +2140,7 @@
   let cache;
   let pathDidChange = false;
   const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
-  const defaultGetKey = location => location.key;
+  const defaultGetKey = location => location.state.key;
   function watchScrollPositions(router, opts) {
     const getKey = opts?.getKey || defaultGetKey;
     if (sessionsStorage) {
@@ -2252,6 +2376,8 @@
       search,
       params,
       to = '.',
+      state,
+      mask,
       preload,
       preloadDelay,
       replace,
@@ -2307,7 +2433,7 @@
       ...resolvedActiveProps,
       ...resolvedInactiveProps,
       ...rest,
-      href: disabled ? undefined : next.href,
+      href: disabled ? undefined : next.maskedLocation ? next.maskedLocation.href : next.href,
       onClick: composeHandlers([onClick, handleReactClick]),
       onFocus: composeHandlers([onFocus, handleFocus]),
       onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
@@ -2374,11 +2500,25 @@
         return state.renderedMatchIds;
       }
     });
+    const locationKey = useRouterState({
+      select: d => d.resolvedLocation.state?.key
+    });
+    const route = router.getRoute(rootRouteId);
+    const errorComponent = React__namespace.useCallback(props => {
+      return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
+        ...props,
+        useMatch: route.useMatch,
+        useContext: route.useContext,
+        useRouteContext: route.useRouteContext,
+        useSearch: route.useSearch,
+        useParams: route.useParams
+      });
+    }, [route]);
     return /*#__PURE__*/React__namespace.createElement(matchIdsContext.Provider, {
       value: [undefined, ...matchIds]
     }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      errorComponent: ErrorComponent,
-      route: router.getRoute(rootRouteId),
+      resetKey: locationKey,
+      errorComponent: errorComponent,
       onCatch: () => {
         warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
       }
@@ -2502,10 +2642,23 @@
     const matchId = matchIds[0];
     const routeId = router.getRouteMatch(matchId).routeId;
     const route = router.getRoute(routeId);
+    const locationKey = useRouterState({
+      select: s => s.resolvedLocation.state?.key
+    });
     const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
-    const errorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
+    const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
     const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? !route.isRoot ? React__namespace.Suspense : SafeFragment;
-    const ResolvedCatchBoundary = !!errorComponent ? CatchBoundary : SafeFragment;
+    const ResolvedCatchBoundary = !!routeErrorComponent ? CatchBoundary : SafeFragment;
+    const errorComponent = React__namespace.useCallback(props => {
+      return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
+        ...props,
+        useMatch: route.useMatch,
+        useContext: route.useContext,
+        useRouteContext: route.useRouteContext,
+        useSearch: route.useSearch,
+        useParams: route.useParams
+      });
+    }, [route]);
     return /*#__PURE__*/React__namespace.createElement(matchIdsContext.Provider, {
       value: matchIds
     }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
@@ -2517,9 +2670,8 @@
         useParams: route.useParams
       })
     }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
-      key: route.id,
+      resetKey: locationKey,
       errorComponent: errorComponent,
-      route: route,
       onCatch: () => {
         warning(false, `Error in route match: ${matchId}`);
       }
@@ -2595,57 +2747,45 @@
   // there has to be a better way to reset error boundaries when the
   // router's location key changes.
 
-  class CatchBoundary extends React__namespace.Component {
-    state = {
-      error: false,
-      info: undefined
-    };
-    componentDidCatch(error, info) {
-      this.props.onCatch(error, info);
-      this.setState({
-        error,
-        info
-      });
-    }
-    render() {
-      return /*#__PURE__*/React__namespace.createElement(CatchBoundaryInner, _extends({}, this.props, {
-        errorState: this.state,
-        reset: () => this.setState({})
-      }));
-    }
-  }
-  function CatchBoundaryInner(props) {
-    const locationKey = useRouterState({
-      select: d => d.resolvedLocation.key
-    });
-    const [activeErrorState, setActiveErrorState] = React__namespace.useState(props.errorState);
+  function CatchBoundary(props) {
     const errorComponent = props.errorComponent ?? ErrorComponent;
-    const prevKeyRef = React__namespace.useRef('');
-    React__namespace.useEffect(() => {
-      if (activeErrorState) {
-        if (locationKey !== prevKeyRef.current) {
-          setActiveErrorState({});
+    return /*#__PURE__*/React__namespace.createElement(CatchBoundaryImpl, {
+      resetKey: props.resetKey,
+      onCatch: props.onCatch,
+      children: ({
+        error
+      }) => {
+        if (error) {
+          return /*#__PURE__*/React__namespace.createElement(errorComponent, {
+            error
+          });
         }
+        return props.children;
       }
-      prevKeyRef.current = locationKey;
-    }, [activeErrorState, locationKey]);
-    React__namespace.useEffect(() => {
-      if (props.errorState.error) {
-        setActiveErrorState(props.errorState);
-      }
-      // props.reset()
-    }, [props.errorState.error]);
-    if (props.errorState.error && activeErrorState.error) {
-      return /*#__PURE__*/React__namespace.createElement(errorComponent, {
-        ...activeErrorState,
-        useMatch: props.route.useMatch,
-        useContext: props.route.useContext,
-        useRouteContext: props.route.useRouteContext,
-        useSearch: props.route.useSearch,
-        useParams: props.route.useParams
-      });
+    });
+  }
+  class CatchBoundaryImpl extends React__namespace.Component {
+    state = {
+      error: null
+    };
+    static getDerivedStateFromError(error) {
+      return {
+        error
+      };
+    }
+    componentDidUpdate(prevProps, prevState) {
+      if (prevState.error && prevProps.resetKey !== this.props.resetKey) {
+        this.setState({
+          error: null
+        });
+      }
+    }
+    componentDidCatch(error) {
+      this.props.onCatch?.(error);
+    }
+    render() {
+      return this.props.children(this.state);
     }
-    return props.children;
   }
   function ErrorComponent({
     error
@@ -2773,6 +2913,8 @@
 
   exports.Await = Await;
   exports.Block = Block;
+  exports.CatchBoundary = CatchBoundary;
+  exports.CatchBoundaryImpl = CatchBoundaryImpl;
   exports.ErrorComponent = ErrorComponent;
   exports.FileRoute = FileRoute;
   exports.Link = Link;
@@ -2792,6 +2934,7 @@
   exports.createBrowserHistory = createBrowserHistory;
   exports.createHashHistory = createHashHistory;
   exports.createMemoryHistory = createMemoryHistory;
+  exports.createRouteMask = createRouteMask;
   exports.decode = decode;
   exports.defaultParseSearch = defaultParseSearch;
   exports.defaultStringifySearch = defaultStringifySearch;