@tanstack/react-router 0.0.1-beta.3 → 0.0.1-beta.30

package/build/umd/index.development.js

@@ -38,56 +38,39 @@
     _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
-
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
             target[key] = source[key];
           }
         }
       }
-
       return target;
     };
     return _extends$2.apply(this, arguments);
   }
-
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
-
     for (i = 0; i < sourceKeys.length; i++) {
       key = sourceKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
       target[key] = source[key];
     }
-
     return target;
   }
 
-  /**
-   * router-core
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
   function _extends$1() {
     _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
-
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
             target[key] = source[key];
           }
         }
       }
-
       return target;
     };
     return _extends$1.apply(this, arguments);
@@ -883,6 +866,7 @@
 
     return parsedPath;
   }
+
   var prefix = 'Invariant failed';
   function invariant(condition, message) {
       if (condition) {
@@ -893,11 +877,16 @@
       throw new Error(value);
   }
 
-  // type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
-  //   k: infer I,
-  // ) => any
-  //   ? I
-  //   : never
+  /**
+   * router-core
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
 
   /**
    * This function returns `a` if `b` is deeply equal.
@@ -908,89 +897,81 @@
     if (prev === next) {
       return prev;
     }
-
     const array = Array.isArray(prev) && Array.isArray(next);
-
     if (array || isPlainObject(prev) && isPlainObject(next)) {
       const aSize = array ? prev.length : Object.keys(prev).length;
       const bItems = array ? next : Object.keys(next);
       const bSize = bItems.length;
       const copy = array ? [] : {};
       let equalItems = 0;
-
       for (let i = 0; i < bSize; i++) {
         const key = array ? i : bItems[i];
         copy[key] = replaceEqualDeep(prev[key], next[key]);
-
         if (copy[key] === prev[key]) {
           equalItems++;
         }
       }
-
       return aSize === bSize && equalItems === aSize ? prev : copy;
     }
-
     return next;
-  } // Copied from: https://github.com/jonschlinkert/is-plain-object
+  }
 
+  // Copied from: https://github.com/jonschlinkert/is-plain-object
   function isPlainObject(o) {
     if (!hasObjectPrototype(o)) {
       return false;
-    } // If has modified constructor
-
+    }
 
+    // If has modified constructor
     const ctor = o.constructor;
-
     if (typeof ctor === 'undefined') {
       return true;
-    } // If has modified prototype
-
+    }
 
+    // If has modified prototype
     const prot = ctor.prototype;
-
     if (!hasObjectPrototype(prot)) {
       return false;
-    } // If constructor does not have an Object-specific method
-
+    }
 
+    // If constructor does not have an Object-specific method
     if (!prot.hasOwnProperty('isPrototypeOf')) {
       return false;
-    } // Most likely a plain Object
-
+    }
 
+    // Most likely a plain Object
     return true;
   }
-
   function hasObjectPrototype(o) {
     return Object.prototype.toString.call(o) === '[object Object]';
   }
-
   function last(arr) {
     return arr[arr.length - 1];
   }
   function warning(cond, message) {
     if (cond) {
       if (typeof console !== 'undefined') console.warn(message);
-
       try {
         throw new Error(message);
       } catch (_unused) {}
     }
-
     return true;
   }
-
   function isFunction(d) {
     return typeof d === 'function';
   }
-
   function functionalUpdate(updater, previous) {
     if (isFunction(updater)) {
       return updater(previous);
     }
-
     return updater;
   }
+  function pick(parent, keys) {
+    return keys.reduce((obj, key) => {
+      obj[key] = parent[key];
+      return obj;
+    }, {});
+  }
 
   function joinPaths(paths) {
     return cleanPath(paths.filter(Boolean).join('/'));
@@ -1024,12 +1005,10 @@
         } else ;
       } else if (toSegment.value === '..') {
         var _last;
-
         // Extra trailing slash? pop it off
         if (baseSegments.length > 1 && ((_last = last(baseSegments)) == null ? void 0 : _last.value) === '/') {
           baseSegments.pop();
         }
-
         baseSegments.pop();
       } else if (toSegment.value === '.') {
         return;
@@ -1044,10 +1023,8 @@
     if (!pathname) {
       return [];
     }
-
     pathname = cleanPath(pathname);
     const segments = [];
-
     if (pathname.slice(0, 1) === '/') {
       pathname = pathname.substring(1);
       segments.push({
@@ -1055,12 +1032,11 @@
         value: '/'
       });
     }
-
     if (!pathname) {
       return segments;
-    } // Remove empty segments and '.' segments
-
+    }
 
+    // Remove empty segments and '.' segments
     const split = pathname.split('/').filter(Boolean);
     segments.push(...split.map(part => {
       if (part.startsWith('*')) {
@@ -1069,20 +1045,17 @@
           value: part
         };
       }
-
-      if (part.charAt(0) === ':') {
+      if (part.charAt(0) === '$') {
         return {
           type: 'param',
           value: part
         };
       }
-
       return {
         type: 'pathname',
         value: part
       };
     }));
-
     if (pathname.slice(-1) === '/') {
       pathname = pathname.substring(1);
       segments.push({
@@ -1090,7 +1063,6 @@
         value: '/'
       });
     }
-
     return segments;
   }
   function interpolatePath(path, params, leaveWildcard) {
@@ -1099,57 +1071,45 @@
       if (segment.value === '*' && !leaveWildcard) {
         return '';
       }
-
       if (segment.type === 'param') {
         var _segment$value$substr;
-
         return (_segment$value$substr = params[segment.value.substring(1)]) != null ? _segment$value$substr : '';
       }
-
       return segment.value;
     }));
   }
   function matchPathname(currentPathname, matchLocation) {
-    const pathParams = matchByPath(currentPathname, matchLocation); // const searchMatched = matchBySearch(currentLocation.search, matchLocation)
+    const pathParams = matchByPath(currentPathname, matchLocation);
+    // const searchMatched = matchBySearch(currentLocation.search, matchLocation)
 
     if (matchLocation.to && !pathParams) {
       return;
-    } // if (matchLocation.search && !searchMatched) {
-    //   return
-    // }
-
-
+    }
     return pathParams != null ? pathParams : {};
   }
   function matchByPath(from, matchLocation) {
     var _matchLocation$to;
-
     const baseSegments = parsePathname(from);
     const routeSegments = parsePathname("" + ((_matchLocation$to = matchLocation.to) != null ? _matchLocation$to : '*'));
     const params = {};
-
     let isMatch = (() => {
       for (let i = 0; i < Math.max(baseSegments.length, routeSegments.length); i++) {
         const baseSegment = baseSegments[i];
         const routeSegment = routeSegments[i];
         const isLastRouteSegment = i === routeSegments.length - 1;
         const isLastBaseSegment = i === baseSegments.length - 1;
-
         if (routeSegment) {
           if (routeSegment.type === 'wildcard') {
             if (baseSegment != null && baseSegment.value) {
               params['*'] = joinPaths(baseSegments.slice(i).map(d => d.value));
               return true;
             }
-
             return false;
           }
-
           if (routeSegment.type === 'pathname') {
             if (routeSegment.value === '/' && !(baseSegment != null && baseSegment.value)) {
               return true;
             }
-
             if (baseSegment) {
               if (matchLocation.caseSensitive) {
                 if (routeSegment.value !== baseSegment.value) {
@@ -1160,41 +1120,36 @@
               }
             }
           }
-
           if (!baseSegment) {
             return false;
           }
-
           if (routeSegment.type === 'param') {
             if ((baseSegment == null ? void 0 : baseSegment.value) === '/') {
               return false;
             }
-
-            if (!baseSegment.value.startsWith(':')) {
+            if (baseSegment.value.charAt(0) !== '$') {
               params[routeSegment.value.substring(1)] = baseSegment.value;
             }
           }
         }
-
         if (isLastRouteSegment && !isLastBaseSegment) {
           return !!matchLocation.fuzzy;
         }
       }
-
       return true;
     })();
-
     return isMatch ? params : undefined;
   }
 
   // @ts-nocheck
+
   // qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
+
   function encode(obj, pfx) {
     var k,
-        i,
-        tmp,
-        str = '';
-
+      i,
+      tmp,
+      str = '';
     for (k in obj) {
       if ((tmp = obj[k]) !== void 0) {
         if (Array.isArray(tmp)) {
@@ -1208,35 +1163,30 @@
         }
       }
     }
-
     return (pfx || '') + str;
   }
-
   function toValue(mix) {
     if (!mix) return '';
     var str = decodeURIComponent(mix);
     if (str === 'false') return false;
     if (str === 'true') return true;
+    if (str.charAt(0) === '0') return str;
     return +str * 0 === 0 ? +str : str;
   }
-
   function decode(str) {
     var tmp,
-        k,
-        out = {},
-        arr = str.split('&');
-
+      k,
+      out = {},
+      arr = str.split('&');
     while (tmp = arr.shift()) {
       tmp = tmp.split('=');
       k = tmp.shift();
-
       if (out[k] !== void 0) {
         out[k] = [].concat(out[k], toValue(tmp.shift()));
       } else {
         out[k] = toValue(tmp.shift());
       }
     }
-
     return out;
   }
 
@@ -1244,14 +1194,12 @@
     _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
-
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
             target[key] = source[key];
           }
         }
       }
-
       return target;
     };
     return _extends.apply(this, arguments);
@@ -1264,36 +1212,31 @@
       path: routePath,
       fullPath
     } = routeConfig;
-
     const action = router.state.actions[id] || (() => {
       router.state.actions[id] = {
-        pending: [],
+        submissions: [],
         submit: async (submission, actionOpts) => {
           var _actionOpts$invalidat;
-
           if (!route) {
             return;
           }
-
           const invalidate = (_actionOpts$invalidat = actionOpts == null ? void 0 : actionOpts.invalidate) != null ? _actionOpts$invalidat : true;
+          if (!(actionOpts != null && actionOpts.multi)) {
+            action.submissions = action.submissions.filter(d => d.isMulti);
+          }
           const actionState = {
             submittedAt: Date.now(),
             status: 'pending',
-            submission
+            submission,
+            isMulti: !!(actionOpts != null && actionOpts.multi)
           };
           action.current = actionState;
           action.latest = actionState;
-          action.pending.push(actionState);
-          router.state = _extends({}, router.state, {
-            currentAction: actionState,
-            latestAction: actionState
-          });
+          action.submissions.push(actionState);
           router.notify();
-
           try {
             const res = await (route.options.action == null ? void 0 : route.options.action(submission));
             actionState.data = res;
-
             if (invalidate) {
               router.invalidateRoute({
                 to: '.',
@@ -1301,26 +1244,20 @@
               });
               await router.reload();
             }
-
             actionState.status = 'success';
             return res;
           } catch (err) {
+            console.log('tanner');
             console.error(err);
             actionState.error = err;
             actionState.status = 'error';
           } finally {
-            action.pending = action.pending.filter(d => d !== actionState);
-            router.removeActionQueue.push({
-              action,
-              actionState
-            });
             router.notify();
           }
         }
       };
       return router.state.actions[id];
     })();
-
     const loader = router.state.loaders[id] || (() => {
       router.state.loaders[id] = {
         pending: [],
@@ -1328,34 +1265,34 @@
           if (!route) {
             return;
           }
-
           const loaderState = {
             loadedAt: Date.now(),
             loaderContext
           };
           loader.current = loaderState;
           loader.latest = loaderState;
-          loader.pending.push(loaderState); // router.state = {
+          loader.pending.push(loaderState);
+
+          // router.state = {
           //   ...router.state,
           //   currentAction: loaderState,
           //   latestAction: loaderState,
           // }
 
           router.notify();
-
           try {
             return await (route.options.loader == null ? void 0 : route.options.loader(loaderContext));
           } finally {
-            loader.pending = loader.pending.filter(d => d !== loaderState); // router.removeActionQueue.push({ loader, loaderState })
-
+            loader.pending = loader.pending.filter(d => d !== loaderState);
+            // router.removeActionQueue.push({ loader, loaderState })
             router.notify();
           }
         }
       };
       return router.state.loaders[id];
     })();
-
     let route = {
+      routeInfo: undefined,
       routeId: id,
       routeRouteId: routeId,
       routePath,
@@ -1388,52 +1325,37 @@
     });
     return route;
   }
-  function cascadeLoaderData(matches) {
-    matches.forEach((match, index) => {
-      const parent = matches[index - 1];
-
-      if (parent) {
-        match.loaderData = replaceEqualDeep(match.loaderData, _extends({}, parent.loaderData, match.routeLoaderData));
-      }
-    });
-  }
 
   const rootRouteId = '__root__';
   const createRouteConfig = function createRouteConfig(options, children, isRoot, parentId, parentPath) {
     if (options === void 0) {
       options = {};
     }
-
     if (isRoot === void 0) {
       isRoot = true;
     }
-
     if (isRoot) {
       options.path = rootRouteId;
-    } // Strip the root from parentIds
-
+    }
 
+    // Strip the root from parentIds
     if (parentId === rootRouteId) {
       parentId = '';
     }
+    let path = isRoot ? rootRouteId : options.path;
 
-    let path = isRoot ? rootRouteId : options.path; // If the path is anything other than an index path, trim it up
-
+    // If the path is anything other than an index path, trim it up
     if (path && path !== '/') {
       path = trimPath(path);
     }
-
     const routeId = path || options.id;
     let id = joinPaths([parentId, routeId]);
-
     if (path === rootRouteId) {
       path = '/';
     }
-
     if (id !== rootRouteId) {
       id = joinPaths(['/', id]);
     }
-
     const fullPath = id === rootRouteId ? '/' : trimPathRight(joinPaths([parentPath, path]));
     return {
       id: id,
@@ -1442,13 +1364,15 @@
       fullPath: fullPath,
       options: options,
       children,
-      createChildren: cb => createRouteConfig(options, cb(childOptions => createRouteConfig(childOptions, undefined, false, id, fullPath)), false, parentId, parentPath),
       addChildren: children => createRouteConfig(options, children, false, parentId, parentPath),
-      createRoute: childOptions => createRouteConfig(childOptions, undefined, false, id, fullPath)
+      createRoute: childOptions => createRouteConfig(childOptions, undefined, false, id, fullPath),
+      generate: () => {
+        invariant(false, "routeConfig.generate() is used by TanStack Router's file-based routing code generation and should not actually be called during runtime. ");
+      }
     };
   };
 
-  const elementTypes = ['element', 'errorElement', 'catchElement', 'pendingElement'];
+  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
   function createRouteMatch(router, route, opts) {
     const routeMatch = _extends({}, route, opts, {
       router,
@@ -1458,10 +1382,10 @@
       status: 'idle',
       routeLoaderData: {},
       loaderData: {},
-      isPending: false,
       isFetching: false,
       isInvalid: false,
       invalidAt: Infinity,
+      // pendingActions: [],
       getIsInvalid: () => {
         const now = Date.now();
         return routeMatch.isInvalid || routeMatch.invalidAt < now;
@@ -1472,63 +1396,30 @@
         resolve: () => {},
         notify: () => {
           routeMatch.__.resolve();
-
           routeMatch.router.notify();
         },
-        startPending: () => {
-          var _routeMatch$options$p, _routeMatch$options$p2;
-
-          const pendingMs = (_routeMatch$options$p = routeMatch.options.pendingMs) != null ? _routeMatch$options$p : router.options.defaultPendingMs;
-          const pendingMinMs = (_routeMatch$options$p2 = routeMatch.options.pendingMinMs) != null ? _routeMatch$options$p2 : router.options.defaultPendingMinMs;
-
-          if (routeMatch.__.pendingTimeout || routeMatch.status !== 'loading' || typeof pendingMs === 'undefined') {
-            return;
-          }
-
-          routeMatch.__.pendingTimeout = setTimeout(() => {
-            routeMatch.isPending = true;
-
-            routeMatch.__.resolve();
-
-            if (typeof pendingMinMs !== 'undefined') {
-              routeMatch.__.pendingMinPromise = new Promise(r => routeMatch.__.pendingMinTimeout = setTimeout(r, pendingMinMs));
-            }
-          }, pendingMs);
-        },
-        cancelPending: () => {
-          routeMatch.isPending = false;
-          clearTimeout(routeMatch.__.pendingTimeout);
-          clearTimeout(routeMatch.__.pendingMinTimeout);
-          delete routeMatch.__.pendingMinPromise;
-        },
-        // setParentMatch: (parentMatch?: RouteMatch) => {
-        //   routeMatch.parentMatch = parentMatch
-        // },
-        // addChildMatch: (childMatch: RouteMatch) => {
-        //   if (
-        //     routeMatch.childMatches.find((d) => d.matchId === childMatch.matchId)
-        //   ) {
-        //     return
-        //   }
-        //   routeMatch.childMatches.push(childMatch)
-        // },
         validate: () => {
           var _routeMatch$parentMat, _routeMatch$parentMat2;
-
           // Validate the search params and stabilize them
           const parentSearch = (_routeMatch$parentMat = (_routeMatch$parentMat2 = routeMatch.parentMatch) == null ? void 0 : _routeMatch$parentMat2.search) != null ? _routeMatch$parentMat : router.location.search;
-
           try {
+            var _validator;
             const prevSearch = routeMatch.routeSearch;
             const validator = typeof routeMatch.options.validateSearch === 'object' ? routeMatch.options.validateSearch.parse : routeMatch.options.validateSearch;
-            let nextSearch = replaceEqualDeep(prevSearch, validator == null ? void 0 : validator(parentSearch)); // Invalidate route matches when search param stability changes
+            let nextSearch = replaceEqualDeep(prevSearch, (_validator = validator == null ? void 0 : validator(parentSearch)) != null ? _validator : {});
 
+            // Invalidate route matches when search param stability changes
             if (prevSearch !== nextSearch) {
               routeMatch.isInvalid = true;
             }
-
             routeMatch.routeSearch = nextSearch;
             routeMatch.search = replaceEqualDeep(parentSearch, _extends({}, parentSearch, nextSearch));
+            componentTypes.map(async type => {
+              const component = routeMatch.options[type];
+              if (typeof routeMatch.__[type] !== 'function') {
+                routeMatch.__[type] = component;
+              }
+            });
           } catch (err) {
             console.error(err);
             const error = new Error('Invalid search params found', {
@@ -1536,162 +1427,129 @@
             });
             error.code = 'INVALID_SEARCH_PARAMS';
             routeMatch.status = 'error';
-            routeMatch.error = error; // Do not proceed with loading the route
-
+            routeMatch.error = error;
+            // Do not proceed with loading the route
             return;
           }
         }
       },
       cancel: () => {
         var _routeMatch$__$abortC;
-
         (_routeMatch$__$abortC = routeMatch.__.abortController) == null ? void 0 : _routeMatch$__$abortC.abort();
-
-        routeMatch.__.cancelPending();
       },
       invalidate: () => {
         routeMatch.isInvalid = true;
       },
       hasLoaders: () => {
-        return !!(route.options.loader || elementTypes.some(d => typeof route.options[d] === 'function'));
+        return !!(route.options.loader || componentTypes.some(d => {
+          var _route$options$d;
+          return (_route$options$d = route.options[d]) == null ? void 0 : _route$options$d.preload;
+        }));
       },
       load: async loaderOpts => {
         const now = Date.now();
-        const minMaxAge = loaderOpts != null && loaderOpts.preload ? Math.max(loaderOpts == null ? void 0 : loaderOpts.maxAge, loaderOpts == null ? void 0 : loaderOpts.gcMaxAge) : 0; // If this is a preload, add it to the preload cache
+        const minMaxAge = loaderOpts != null && loaderOpts.preload ? Math.max(loaderOpts == null ? void 0 : loaderOpts.maxAge, loaderOpts == null ? void 0 : loaderOpts.gcMaxAge) : 0;
 
+        // If this is a preload, add it to the preload cache
         if (loaderOpts != null && loaderOpts.preload && minMaxAge > 0) {
           // If the match is currently active, don't preload it
           if (router.state.matches.find(d => d.matchId === routeMatch.matchId)) {
             return;
           }
-
           router.matchCache[routeMatch.matchId] = {
             gc: now + loaderOpts.gcMaxAge,
             match: routeMatch
           };
-        } // If the match is invalid, errored or idle, trigger it to load
-
+        }
 
+        // If the match is invalid, errored or idle, trigger it to load
         if (routeMatch.status === 'success' && routeMatch.getIsInvalid() || routeMatch.status === 'error' || routeMatch.status === 'idle') {
           const maxAge = loaderOpts != null && loaderOpts.preload ? loaderOpts == null ? void 0 : loaderOpts.maxAge : undefined;
-          routeMatch.fetch({
+          await routeMatch.fetch({
             maxAge
           });
         }
       },
       fetch: async opts => {
-        const id = '' + Date.now() + Math.random();
-        routeMatch.__.latestId = id; // If the match was in an error state, set it
+        const loadId = '' + Date.now() + Math.random();
+        routeMatch.__.latestId = loadId;
+        const checkLatest = async () => {
+          if (loadId !== routeMatch.__.latestId) {
+            // warning(true, 'Data loader is out of date!')
+            return new Promise(() => {});
+          }
+        };
+
+        // If the match was in an error state, set it
         // to a loading state again. Otherwise, keep it
         // as loading or resolved
-
         if (routeMatch.status === 'idle') {
           routeMatch.status = 'loading';
-        } // We started loading the route, so it's no longer invalid
-
+        }
 
+        // We started loading the route, so it's no longer invalid
         routeMatch.isInvalid = false;
         routeMatch.__.loadPromise = new Promise(async resolve => {
           // We are now fetching, even if it's in the background of a
           // resolved state
           routeMatch.isFetching = true;
           routeMatch.__.resolve = resolve;
-
-          const loaderPromise = (async () => {
-            // Load the elements and data in parallel
-            routeMatch.__.elementsPromise = (async () => {
-              // then run all element and data loaders in parallel
-              // For each element type, potentially load it asynchronously
-              await Promise.all(elementTypes.map(async type => {
-                const routeElement = routeMatch.options[type];
-
-                if (routeMatch.__[type]) {
-                  return;
-                }
-
-                routeMatch.__[type] = await router.options.createElement(routeElement);
-              }));
-            })();
-
-            routeMatch.__.dataPromise = Promise.resolve().then(async () => {
-              try {
-                var _ref, _ref2, _opts$maxAge;
-
-                if (routeMatch.options.loader) {
-                  const data = await routeMatch.options.loader({
-                    params: routeMatch.params,
-                    search: routeMatch.routeSearch,
-                    signal: routeMatch.__.abortController.signal
-                  });
-
-                  if (id !== routeMatch.__.latestId) {
-                    return routeMatch.__.loaderPromise;
-                  }
-
-                  routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
-                }
-
-                routeMatch.error = undefined;
-                routeMatch.status = 'success';
-                routeMatch.updatedAt = Date.now();
-                routeMatch.invalidAt = routeMatch.updatedAt + ((_ref = (_ref2 = (_opts$maxAge = opts == null ? void 0 : opts.maxAge) != null ? _opts$maxAge : routeMatch.options.loaderMaxAge) != null ? _ref2 : router.options.defaultLoaderMaxAge) != null ? _ref : 0);
-              } catch (err) {
-                if (id !== routeMatch.__.latestId) {
-                  return routeMatch.__.loaderPromise;
-                }
-
-                {
-                  console.error(err);
-                }
-
-                routeMatch.error = err;
-                routeMatch.status = 'error';
-                routeMatch.updatedAt = Date.now();
+          routeMatch.__.componentsPromise = (async () => {
+            // then run all component and data loaders in parallel
+            // For each component type, potentially load it asynchronously
+
+            await Promise.all(componentTypes.map(async type => {
+              var _routeMatch$__$type;
+              const component = routeMatch.options[type];
+              if ((_routeMatch$__$type = routeMatch.__[type]) != null && _routeMatch$__$type.preload) {
+                routeMatch.__[type] = await router.options.loadComponent(component);
               }
-            });
-
+            }));
+          })();
+          routeMatch.__.dataPromise = Promise.resolve().then(async () => {
             try {
-              await Promise.all([routeMatch.__.elementsPromise, routeMatch.__.dataPromise]);
-
-              if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loaderPromise;
-              }
-
-              if (routeMatch.__.pendingMinPromise) {
-                await routeMatch.__.pendingMinPromise;
-                delete routeMatch.__.pendingMinPromise;
+              var _ref, _ref2, _opts$maxAge;
+              if (routeMatch.options.loader) {
+                const data = await router.loadMatchData(routeMatch);
+                await checkLatest();
+                routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
               }
-            } finally {
-              if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loaderPromise;
+              routeMatch.error = undefined;
+              routeMatch.status = 'success';
+              routeMatch.updatedAt = Date.now();
+              routeMatch.invalidAt = routeMatch.updatedAt + ((_ref = (_ref2 = (_opts$maxAge = opts == null ? void 0 : opts.maxAge) != null ? _opts$maxAge : routeMatch.options.loaderMaxAge) != null ? _ref2 : router.options.defaultLoaderMaxAge) != null ? _ref : 0);
+              return routeMatch.routeLoaderData;
+            } catch (err) {
+              await checkLatest();
+              {
+                console.error(err);
               }
-
-              routeMatch.__.cancelPending();
-
-              routeMatch.isPending = false;
-              routeMatch.isFetching = false;
-
-              routeMatch.__.notify();
+              routeMatch.error = err;
+              routeMatch.status = 'error';
+              routeMatch.updatedAt = Date.now();
+              throw err;
             }
-          })();
-
-          routeMatch.__.loaderPromise = loaderPromise;
-          await loaderPromise;
-
-          if (id !== routeMatch.__.latestId) {
-            return routeMatch.__.loaderPromise;
+          });
+          const after = async () => {
+            await checkLatest();
+            routeMatch.isFetching = false;
+            delete routeMatch.__.loadPromise;
+            routeMatch.__.notify();
+          };
+          try {
+            await Promise.all([routeMatch.__.componentsPromise, routeMatch.__.dataPromise.catch(() => {})]);
+            after();
+          } catch (_unused) {
+            after();
           }
-
-          delete routeMatch.__.loaderPromise;
         });
-        return await routeMatch.__.loadPromise;
+        await routeMatch.__.loadPromise;
+        await checkLatest();
       }
     });
-
     if (!routeMatch.hasLoaders()) {
       routeMatch.status = 'success';
     }
-
     return routeMatch;
   }
 
@@ -1702,42 +1560,39 @@
       if (searchStr.substring(0, 1) === '?') {
         searchStr = searchStr.substring(1);
       }
+      let query = decode(searchStr);
 
-      let query = decode(searchStr); // Try to parse any query params that might be json
-
+      // Try to parse any query params that might be json
       for (let key in query) {
         const value = query[key];
-
         if (typeof value === 'string') {
           try {
             query[key] = parser(value);
-          } catch (err) {//
+          } catch (err) {
+            //
           }
         }
       }
-
       return query;
     };
   }
   function stringifySearchWith(stringify) {
     return search => {
       search = _extends({}, search);
-
       if (search) {
         Object.keys(search).forEach(key => {
           const val = search[key];
-
           if (typeof val === 'undefined' || val === undefined) {
             delete search[key];
           } else if (val && typeof val === 'object' && val !== null) {
             try {
               search[key] = stringify(val);
-            } catch (err) {// silent
+            } catch (err) {
+              // silent
             }
           }
         });
       }
-
       const searchStr = encode(search).toString();
       return searchStr ? "?" + searchStr : '';
     };
@@ -1745,50 +1600,53 @@
 
   var _window$document;
   // Detect if we're in the DOM
-  const isServer = typeof window === 'undefined' || !((_window$document = window.document) != null && _window$document.createElement); // This is the default history object if none is defined
+  const isServer = typeof window === 'undefined' || !((_window$document = window.document) != null && _window$document.createElement);
 
+  // This is the default history object if none is defined
   const createDefaultHistory = () => isServer ? createMemoryHistory() : createBrowserHistory();
-
+  function getInitialRouterState() {
+    return {
+      status: 'idle',
+      location: null,
+      matches: [],
+      actions: {},
+      loaders: {},
+      lastUpdated: Date.now(),
+      isFetching: false,
+      isPreloading: false
+    };
+  }
   function createRouter(userOptions) {
     var _userOptions$stringif, _userOptions$parseSea;
-
     const history = (userOptions == null ? void 0 : userOptions.history) || createDefaultHistory();
-
     const originalOptions = _extends({
       defaultLoaderGcMaxAge: 5 * 60 * 1000,
       defaultLoaderMaxAge: 0,
       defaultPreloadMaxAge: 2000,
-      defaultPreloadDelay: 50
+      defaultPreloadDelay: 50,
+      context: undefined
     }, userOptions, {
       stringifySearch: (_userOptions$stringif = userOptions == null ? void 0 : userOptions.stringifySearch) != null ? _userOptions$stringif : defaultStringifySearch,
       parseSearch: (_userOptions$parseSea = userOptions == null ? void 0 : userOptions.parseSearch) != null ? _userOptions$parseSea : defaultParseSearch
     });
-
     let router = {
+      types: undefined,
+      // public api
       history,
       options: originalOptions,
       listeners: [],
-      removeActionQueue: [],
       // Resolved after construction
       basepath: '',
       routeTree: undefined,
       routesById: {},
       location: undefined,
-      allRouteInfo: undefined,
       //
-      navigationPromise: Promise.resolve(),
       resolveNavigation: () => {},
       matchCache: {},
-      state: {
-        status: 'idle',
-        location: null,
-        matches: [],
-        actions: {},
-        loaders: {},
-        loaderData: {},
-        lastUpdated: Date.now(),
-        isFetching: false,
-        isPreloading: false
+      state: getInitialRouterState(),
+      reset: () => {
+        router.state = getInitialRouterState();
+        router.notify();
       },
       startedLoadingAt: Date.now(),
       subscribe: listener => {
@@ -1801,62 +1659,104 @@
         return router.routesById[id];
       },
       notify: () => {
-        router.state = _extends({}, router.state, {
-          isFetching: router.state.status === 'loading' || router.state.matches.some(d => d.isFetching),
-          isPreloading: Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId))
-        });
+        const isFetching = router.state.status === 'loading' || router.state.matches.some(d => d.isFetching);
+        const isPreloading = Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId));
+        if (router.state.isFetching !== isFetching || router.state.isPreloading !== isPreloading) {
+          router.state = _extends({}, router.state, {
+            isFetching,
+            isPreloading
+          });
+        }
         cascadeLoaderData(router.state.matches);
         router.listeners.forEach(listener => listener(router));
       },
+      dehydrate: () => {
+        return {
+          location: router.location,
+          state: _extends({}, pick(router.state, ['status', 'location', 'lastUpdated', 'location']), {
+            matches: router.state.matches.map(match => pick(match, ['matchId', 'status', 'routeLoaderData', 'loaderData', 'isInvalid', 'invalidAt']))
+          }),
+          context: router.options.context
+        };
+      },
+      hydrate: dehydratedState => {
+        // Update the location
+        router.location = dehydratedState.location;
+
+        // Update the context
+        router.options.context = dehydratedState.context;
+
+        // Match the routes
+        const matches = router.matchRoutes(router.location.pathname, {
+          strictParseParams: true
+        });
+        matches.forEach((match, index) => {
+          const dehydratedMatch = dehydratedState.state.matches[index];
+          invariant(dehydratedMatch, 'Oh no! Dehydrated route matches did not match the active state of the router 😬');
+          Object.assign(match, dehydratedMatch);
+        });
+        matches.forEach(match => match.__.validate());
+        router.state = _extends({}, router.state, dehydratedState, {
+          matches
+        });
+      },
       mount: () => {
         const next = router.__.buildLocation({
           to: '.',
           search: true,
           hash: true
-        }); // If the current location isn't updated, trigger a navigation
-        // to the current location. Otherwise, load the current location.
-
+        });
 
+        // If the current location isn't updated, trigger a navigation
+        // to the current location. Otherwise, load the current location.
         if (next.href !== router.location.href) {
           router.__.commitLocation(next, true);
-        } else {
-          router.loadLocation();
         }
+        if (!router.state.matches.length) {
+          router.load();
+        }
+        const unsub = router.history.listen(event => {
+          router.load(router.__.parseLocation(event.location, router.location));
+        });
 
-        const unsub = history.listen(event => {
-          router.loadLocation(router.__.parseLocation(event.location, router.location));
-        }); // addEventListener does not exist in React Native, but window does
+        // addEventListener does not exist in React Native, but window does
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-
         if (!isServer && window.addEventListener) {
           // Listen to visibillitychange and focus
           window.addEventListener('visibilitychange', router.onFocus, false);
           window.addEventListener('focus', router.onFocus, false);
         }
-
         return () => {
-          unsub(); // Be sure to unsubscribe if a new handler is set
-
-          window.removeEventListener('visibilitychange', router.onFocus);
-          window.removeEventListener('focus', router.onFocus);
+          unsub();
+          if (!isServer && window.removeEventListener) {
+            // Be sure to unsubscribe if a new handler is set
+            window.removeEventListener('visibilitychange', router.onFocus);
+            window.removeEventListener('focus', router.onFocus);
+          }
         };
       },
       onFocus: () => {
-        router.loadLocation();
+        router.load();
       },
       update: opts => {
+        const newHistory = (opts == null ? void 0 : opts.history) !== router.history;
+        if (!router.location || newHistory) {
+          if (opts != null && opts.history) {
+            router.history = opts.history;
+          }
+          router.location = router.__.parseLocation(router.history.location);
+          router.state.location = router.location;
+        }
         Object.assign(router.options, opts);
         const {
           basepath,
           routeConfig
         } = router.options;
         router.basepath = cleanPath("/" + (basepath != null ? basepath : ''));
-
         if (routeConfig) {
           router.routesById = {};
           router.routeTree = router.__.buildRouteTree(routeConfig);
         }
-
         return router;
       },
       cancelMatches: () => {
@@ -1865,58 +1765,60 @@
           match.cancel();
         });
       },
-      loadLocation: async next => {
+      load: async next => {
         const id = Math.random();
         router.startedLoadingAt = id;
-
         if (next) {
           // Ingest the new location
           router.location = next;
-        } // Clear out old actions
-
-
-        router.removeActionQueue.forEach(_ref => {
-          let {
-            action,
-            actionState
-          } = _ref;
-
-          if (router.state.currentAction === actionState) {
-            router.state.currentAction = undefined;
-          }
-
-          if (action.current === actionState) {
-            action.current = undefined;
-          }
-        });
-        router.removeActionQueue = []; // Cancel any pending matches
+        }
 
-        router.cancelMatches(); // Match the routes
+        // Cancel any pending matches
+        router.cancelMatches();
 
-        const matches = router.matchRoutes(location.pathname, {
+        // Match the routes
+        const matches = router.matchRoutes(router.location.pathname, {
           strictParseParams: true
         });
-        router.state = _extends({}, router.state, {
-          pending: {
+        if (typeof document !== 'undefined') {
+          router.state = _extends({}, router.state, {
+            pending: {
+              matches: matches,
+              location: router.location
+            },
+            status: 'loading'
+          });
+        } else {
+          router.state = _extends({}, router.state, {
             matches: matches,
-            location: router.location
-          },
-          status: 'loading'
-        });
-        router.notify(); // Load the matches
+            location: router.location,
+            status: 'loading'
+          });
+        }
 
-        await router.loadMatches(matches, {
-          withPending: true
-        });
+        // Check if each match middleware to see if the route can be accessed
+        try {
+          await Promise.all(matches.map(match => match.options.beforeLoad == null ? void 0 : match.options.beforeLoad({
+            router: router,
+            match
+          })));
+        } catch (err) {
+          if (err != null && err.then) {
+            await new Promise(() => {});
+          }
+          throw err;
+        }
+        router.notify();
 
+        // Load the matches
+        await router.loadMatches(matches);
         if (router.startedLoadingAt !== id) {
           // Ignore side-effects of match loading
           return router.navigationPromise;
         }
-
         const previousMatches = router.state.matches;
         const exiting = [],
-              staying = [];
+          staying = [];
         previousMatches.forEach(d => {
           if (matches.find(dd => dd.matchId === d.matchId)) {
             staying.push(d);
@@ -1924,22 +1826,23 @@
             exiting.push(d);
           }
         });
+        const entering = matches.filter(d => {
+          return !previousMatches.find(dd => dd.matchId === d.matchId);
+        });
         const now = Date.now();
         exiting.forEach(d => {
-          var _ref2, _d$options$loaderGcMa, _ref3, _d$options$loaderMaxA;
-
+          var _ref, _d$options$loaderGcMa, _ref2, _d$options$loaderMaxA;
           d.__.onExit == null ? void 0 : d.__.onExit({
             params: d.params,
             search: d.routeSearch
-          }); // Clear idle error states when match leaves
+          });
 
+          // Clear idle error states when match leaves
           if (d.status === 'error' && !d.isFetching) {
             d.status = 'idle';
             d.error = undefined;
           }
-
-          const gc = Math.max((_ref2 = (_d$options$loaderGcMa = d.options.loaderGcMaxAge) != null ? _d$options$loaderGcMa : router.options.defaultLoaderGcMaxAge) != null ? _ref2 : 0, (_ref3 = (_d$options$loaderMaxA = d.options.loaderMaxAge) != null ? _d$options$loaderMaxA : router.options.defaultLoaderMaxAge) != null ? _ref3 : 0);
-
+          const gc = Math.max((_ref = (_d$options$loaderGcMa = d.options.loaderGcMaxAge) != null ? _d$options$loaderGcMa : router.options.defaultLoaderGcMaxAge) != null ? _ref : 0, (_ref2 = (_d$options$loaderMaxA = d.options.loaderMaxAge) != null ? _d$options$loaderMaxA : router.options.defaultLoaderMaxAge) != null ? _ref2 : 0);
           if (gc > 0) {
             router.matchCache[d.matchId] = {
               gc: gc == Infinity ? Number.MAX_SAFE_INTEGER : now + gc,
@@ -1953,27 +1856,24 @@
             search: d.routeSearch
           });
         });
-        const entering = matches.filter(d => {
-          return !previousMatches.find(dd => dd.matchId === d.matchId);
-        });
         entering.forEach(d => {
-          d.__.onExit = d.options.onMatch == null ? void 0 : d.options.onMatch({
+          d.__.onExit = d.options.onLoaded == null ? void 0 : d.options.onLoaded({
             params: d.params,
             search: d.search
           });
           delete router.matchCache[d.matchId];
         });
-
-        if (matches.some(d => d.status === 'loading')) {
-          router.notify();
-          await Promise.all(matches.map(d => d.__.loaderPromise || Promise.resolve()));
-        }
-
         if (router.startedLoadingAt !== id) {
           // Ignore side-effects of match loading
           return;
         }
-
+        matches.forEach(match => {
+          // Clear actions
+          if (match.action) {
+            match.action.current = undefined;
+            match.action.submissions = [];
+          }
+        });
         router.state = _extends({}, router.state, {
           location: router.location,
           matches,
@@ -1986,18 +1886,19 @@
       cleanMatchCache: () => {
         const now = Date.now();
         Object.keys(router.matchCache).forEach(matchId => {
-          const entry = router.matchCache[matchId]; // Don't remove loading matches
+          const entry = router.matchCache[matchId];
 
+          // Don't remove loading matches
           if (entry.match.status === 'loading') {
             return;
-          } // Do not remove successful matches that are still valid
-
+          }
 
+          // Do not remove successful matches that are still valid
           if (entry.gc > 0 && entry.gc > now) {
             return;
-          } // Everything else gets removed
-
+          }
 
+          // Everything else gets removed
           delete router.matchCache[matchId];
         });
       },
@@ -2005,7 +1906,6 @@
         if (navigateOpts === void 0) {
           navigateOpts = router.location;
         }
-
         const next = router.buildNext(navigateOpts);
         const matches = router.matchRoutes(next.pathname, {
           strictParseParams: true
@@ -2014,108 +1914,87 @@
         return matches;
       },
       preloadRoute: async function preloadRoute(navigateOpts, loaderOpts) {
-        var _ref4, _ref5, _loaderOpts$maxAge, _ref6, _ref7, _loaderOpts$gcMaxAge;
-
+        var _ref3, _ref4, _loaderOpts$maxAge, _ref5, _ref6, _loaderOpts$gcMaxAge;
         if (navigateOpts === void 0) {
           navigateOpts = router.location;
         }
-
         const next = router.buildNext(navigateOpts);
         const matches = router.matchRoutes(next.pathname, {
           strictParseParams: true
         });
         await router.loadMatches(matches, {
           preload: true,
-          maxAge: (_ref4 = (_ref5 = (_loaderOpts$maxAge = loaderOpts.maxAge) != null ? _loaderOpts$maxAge : router.options.defaultPreloadMaxAge) != null ? _ref5 : router.options.defaultLoaderMaxAge) != null ? _ref4 : 0,
-          gcMaxAge: (_ref6 = (_ref7 = (_loaderOpts$gcMaxAge = loaderOpts.gcMaxAge) != null ? _loaderOpts$gcMaxAge : router.options.defaultPreloadGcMaxAge) != null ? _ref7 : router.options.defaultLoaderGcMaxAge) != null ? _ref6 : 0
+          maxAge: (_ref3 = (_ref4 = (_loaderOpts$maxAge = loaderOpts.maxAge) != null ? _loaderOpts$maxAge : router.options.defaultPreloadMaxAge) != null ? _ref4 : router.options.defaultLoaderMaxAge) != null ? _ref3 : 0,
+          gcMaxAge: (_ref5 = (_ref6 = (_loaderOpts$gcMaxAge = loaderOpts.gcMaxAge) != null ? _loaderOpts$gcMaxAge : router.options.defaultPreloadGcMaxAge) != null ? _ref6 : router.options.defaultLoaderGcMaxAge) != null ? _ref5 : 0
         });
         return matches;
       },
       matchRoutes: (pathname, opts) => {
         var _router$state$pending3, _router$state$pending4;
-
         router.cleanMatchCache();
         const matches = [];
-
         if (!router.routeTree) {
           return matches;
         }
-
         const existingMatches = [...router.state.matches, ...((_router$state$pending3 = (_router$state$pending4 = router.state.pending) == null ? void 0 : _router$state$pending4.matches) != null ? _router$state$pending3 : [])];
-
         const recurse = async routes => {
           var _parentMatch$params, _router$options$filte, _foundRoute$childRout;
-
           const parentMatch = last(matches);
           let params = (_parentMatch$params = parentMatch == null ? void 0 : parentMatch.params) != null ? _parentMatch$params : {};
           const filteredRoutes = (_router$options$filte = router.options.filterRoutes == null ? void 0 : router.options.filterRoutes(routes)) != null ? _router$options$filte : routes;
           let foundRoutes = [];
-
           const findMatchInRoutes = (parentRoutes, routes) => {
             routes.some(route => {
               var _route$childRoutes, _route$childRoutes2, _route$options$caseSe;
-
               if (!route.routePath && (_route$childRoutes = route.childRoutes) != null && _route$childRoutes.length) {
                 return findMatchInRoutes([...foundRoutes, route], route.childRoutes);
               }
-
               const fuzzy = !!(route.routePath !== '/' || (_route$childRoutes2 = route.childRoutes) != null && _route$childRoutes2.length);
               const matchParams = matchPathname(pathname, {
                 to: route.fullPath,
                 fuzzy,
                 caseSensitive: (_route$options$caseSe = route.options.caseSensitive) != null ? _route$options$caseSe : router.options.caseSensitive
               });
-
               if (matchParams) {
                 let parsedParams;
-
                 try {
                   var _route$options$parseP;
-
                   parsedParams = (_route$options$parseP = route.options.parseParams == null ? void 0 : route.options.parseParams(matchParams)) != null ? _route$options$parseP : matchParams;
                 } catch (err) {
                   if (opts != null && opts.strictParseParams) {
                     throw err;
                   }
                 }
-
                 params = _extends({}, params, parsedParams);
               }
-
               if (!!matchParams) {
                 foundRoutes = [...parentRoutes, route];
               }
-
               return !!foundRoutes.length;
             });
             return !!foundRoutes.length;
           };
-
           findMatchInRoutes([], filteredRoutes);
-
           if (!foundRoutes.length) {
             return;
           }
-
           foundRoutes.forEach(foundRoute => {
             var _router$matchCache$ma;
-
             const interpolatedPath = interpolatePath(foundRoute.routePath, params);
             const matchId = interpolatePath(foundRoute.routeId, params, true);
             const match = existingMatches.find(d => d.matchId === matchId) || ((_router$matchCache$ma = router.matchCache[matchId]) == null ? void 0 : _router$matchCache$ma.match) || createRouteMatch(router, foundRoute, {
+              parentMatch,
               matchId,
               params,
-              pathname: joinPaths([pathname, interpolatedPath])
+              pathname: joinPaths([router.basepath, interpolatedPath])
             });
             matches.push(match);
           });
           const foundRoute = last(foundRoutes);
-
           if ((_foundRoute$childRout = foundRoute.childRoutes) != null && _foundRoute$childRout.length) {
             recurse(foundRoute.childRoutes);
           }
         };
-
         recurse([router.routeTree]);
         cascadeLoaderData(matches);
         return matches;
@@ -2124,23 +2003,61 @@
         const matchPromises = resolvedMatches.map(async match => {
           // Validate the match (loads search params etc)
           match.__.validate();
-
           match.load(loaderOpts);
-
-          if (match.status === 'loading') {
-            // If requested, start the pending timers
-            if (loaderOpts != null && loaderOpts.withPending) match.__.startPending(); // Wait for the first sign of activity from the match
-            // This might be completion, error, or a pending state
-
+          const search = match.search;
+          if (search.__data && search.__data.matchId !== match.matchId) {
+            return;
+          }
+          if (match.__.loadPromise) {
+            // Wait for the first sign of activity from the match
             await match.__.loadPromise;
           }
         });
         router.notify();
         await Promise.all(matchPromises);
       },
+      loadMatchData: async routeMatch => {
+        if (isServer || !router.options.useServerData) {
+          var _await$routeMatch$opt;
+          return (_await$routeMatch$opt = await (routeMatch.options.loader == null ? void 0 : routeMatch.options.loader({
+            // parentLoaderPromise: routeMatch.parentMatch?.__.dataPromise,
+            params: routeMatch.params,
+            search: routeMatch.routeSearch,
+            signal: routeMatch.__.abortController.signal
+          }))) != null ? _await$routeMatch$opt : {};
+        } else {
+          const next = router.buildNext({
+            to: '.',
+            search: d => _extends({}, d != null ? d : {}, {
+              __data: {
+                matchId: routeMatch.matchId
+              }
+            })
+          });
+
+          // Refresh:
+          // '/dashboard'
+          // '/dashboard/invoices/'
+          // '/dashboard/invoices/123'
+
+          // New:
+          // '/dashboard/invoices/456'
+
+          // TODO: batch requests when possible
+
+          const res = await fetch(next.href, {
+            method: 'GET'
+            // signal: routeMatch.__.abortController.signal,
+          });
+
+          if (res.ok) {
+            return res.json();
+          }
+          throw new Error('Failed to fetch match data');
+        }
+      },
       invalidateRoute: opts => {
         var _router$state$pending5, _router$state$pending6;
-
         const next = router.buildNext(opts);
         const unloadedMatchIds = router.matchRoutes(next.pathname).map(d => d.matchId);
         [...router.state.matches, ...((_router$state$pending5 = (_router$state$pending6 = router.state.pending) == null ? void 0 : _router$state$pending6.matches) != null ? _router$state$pending5 : [])].forEach(match => {
@@ -2159,30 +2076,26 @@
       },
       matchRoute: (location, opts) => {
         var _location$from;
-
         // const location = router.buildNext(opts)
+
         location = _extends({}, location, {
           to: location.to ? router.resolvePath((_location$from = location.from) != null ? _location$from : '', location.to) : undefined
         });
         const next = router.buildNext(location);
-
         if (opts != null && opts.pending) {
           var _router$state$pending7;
-
           if (!((_router$state$pending7 = router.state.pending) != null && _router$state$pending7.location)) {
             return false;
           }
-
           return !!matchPathname(router.state.pending.location.pathname, _extends({}, opts, {
             to: next.pathname
           }));
         }
-
         return !!matchPathname(router.state.location.pathname, _extends({}, opts, {
           to: next.pathname
         }));
       },
-      navigate: async _ref8 => {
+      navigate: async _ref7 => {
         let {
           from,
           to = '.',
@@ -2190,20 +2103,19 @@
           hash,
           replace,
           params
-        } = _ref8;
+        } = _ref7;
         // If this link simply reloads the current route,
         // make sure it has a new key so it will trigger a data refresh
+
         // If this `to` is a valid external URL, return
         // null for LinkUtils
         const toString = String(to);
         const fromString = String(from);
         let isExternal;
-
         try {
           new URL("" + toString);
           isExternal = true;
         } catch (e) {}
-
         invariant(!isExternal, 'Attempting to navigate to external url with router.navigate!');
         return router.__.navigate({
           from: fromString,
@@ -2214,9 +2126,8 @@
           params
         });
       },
-      buildLink: _ref9 => {
-        var _preload, _ref10;
-
+      buildLink: _ref8 => {
+        var _preload, _ref9;
         let {
           from,
           to = '.',
@@ -2231,12 +2142,13 @@
           preloadGcMaxAge: userPreloadGcMaxAge,
           preloadDelay: userPreloadDelay,
           disabled
-        } = _ref9;
-
+        } = _ref8;
         // If this link simply reloads the current route,
         // make sure it has a new key so it will trigger a data refresh
+
         // If this `to` is a valid external URL, return
         // null for LinkUtils
+
         try {
           new URL("" + to);
           return {
@@ -2244,7 +2156,6 @@
             href: to
           };
         } catch (e) {}
-
         const nextOpts = {
           from,
           to,
@@ -2255,33 +2166,35 @@
         };
         const next = router.buildNext(nextOpts);
         preload = (_preload = preload) != null ? _preload : router.options.defaultPreload;
-        const preloadDelay = (_ref10 = userPreloadDelay != null ? userPreloadDelay : router.options.defaultPreloadDelay) != null ? _ref10 : 0; // Compare path/hash for matches
+        const preloadDelay = (_ref9 = userPreloadDelay != null ? userPreloadDelay : router.options.defaultPreloadDelay) != null ? _ref9 : 0;
 
+        // Compare path/hash for matches
         const pathIsEqual = router.state.location.pathname === next.pathname;
         const currentPathSplit = router.state.location.pathname.split('/');
         const nextPathSplit = next.pathname.split('/');
         const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-        const hashIsEqual = router.state.location.hash === next.hash; // Combine the matches based on user options
-
+        const hashIsEqual = router.state.location.hash === next.hash;
+        // Combine the matches based on user options
         const pathTest = activeOptions != null && activeOptions.exact ? pathIsEqual : pathIsFuzzyEqual;
-        const hashTest = activeOptions != null && activeOptions.includeHash ? hashIsEqual : true; // The final "active" test
+        const hashTest = activeOptions != null && activeOptions.includeHash ? hashIsEqual : true;
 
-        const isActive = pathTest && hashTest; // The click handler
+        // The final "active" test
+        const isActive = pathTest && hashTest;
 
+        // The click handler
         const handleClick = e => {
           if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
             e.preventDefault();
-
             if (pathIsEqual && !search && !hash) {
               router.invalidateRoute(nextOpts);
-            } // All is well? Navigate!)
-
+            }
 
+            // All is well? Navigate!)
             router.__.navigate(nextOpts);
           }
-        }; // The click handler
-
+        };
 
+        // The click handler
         const handleFocus = e => {
           if (preload) {
             router.preloadRoute(nextOpts, {
@@ -2290,15 +2203,12 @@
             });
           }
         };
-
         const handleEnter = e => {
           const target = e.target || {};
-
           if (preload) {
             if (target.preloadTimeout) {
               return;
             }
-
             target.preloadTimeout = setTimeout(() => {
               target.preloadTimeout = null;
               router.preloadRoute(nextOpts, {
@@ -2308,16 +2218,13 @@
             }, preloadDelay);
           }
         };
-
         const handleLeave = e => {
           const target = e.target || {};
-
           if (target.preloadTimeout) {
             clearTimeout(target.preloadTimeout);
             target.preloadTimeout = null;
           }
         };
-
         return {
           type: 'internal',
           next,
@@ -2331,21 +2238,15 @@
       },
       buildNext: opts => {
         const next = router.__.buildLocation(opts);
-
         const matches = router.matchRoutes(next.pathname);
-
         const __preSearchFilters = matches.map(match => {
           var _match$options$preSea;
-
           return (_match$options$preSea = match.options.preSearchFilters) != null ? _match$options$preSea : [];
         }).flat().filter(Boolean);
-
         const __postSearchFilters = matches.map(match => {
           var _match$options$postSe;
-
           return (_match$options$postSe = match.options.postSearchFilters) != null ? _match$options$postSe : [];
         }).flat().filter(Boolean);
-
         return router.__.buildLocation(_extends({}, opts, {
           __preSearchFilters,
           __postSearchFilters
@@ -2356,18 +2257,12 @@
           const recurseRoutes = (routeConfigs, parent) => {
             return routeConfigs.map(routeConfig => {
               const routeOptions = routeConfig.options;
-              const route = createRoute(routeConfig, routeOptions, parent, router); // {
-              //   pendingMs: routeOptions.pendingMs ?? router.defaultPendingMs,
-              //   pendingMinMs: routeOptions.pendingMinMs ?? router.defaultPendingMinMs,
-              // }
-
+              const route = createRoute(routeConfig, routeOptions, parent, router);
               const existingRoute = router.routesById[route.routeId];
-
               if (existingRoute) {
                 {
                   console.warn("Duplicate routes found with id: " + String(route.routeId), router.routesById, route);
                 }
-
                 throw new Error();
               }
               router.routesById[route.routeId] = route;
@@ -2376,13 +2271,11 @@
               return route;
             });
           };
-
           const routes = recurseRoutes([rootRouteConfig]);
           return routes[0];
         },
         parseLocation: (location, previousLocation) => {
           var _location$hash$split$;
-
           const parsedSearch = router.options.parseSearch(location.search);
           return {
             pathname: location.pathname,
@@ -2400,41 +2293,36 @@
         },
         buildLocation: function buildLocation(dest) {
           var _dest$from, _router$basepath, _dest$to, _last, _dest$params, _dest$__preSearchFilt, _functionalUpdate, _dest$__preSearchFilt2, _dest$__postSearchFil;
-
           if (dest === void 0) {
             dest = {};
           }
-
           // const resolvedFrom: Location = {
           //   ...router.location,
           const fromPathname = dest.fromCurrent ? router.location.pathname : (_dest$from = dest.from) != null ? _dest$from : router.location.pathname;
-
           let pathname = resolvePath((_router$basepath = router.basepath) != null ? _router$basepath : '/', fromPathname, "" + ((_dest$to = dest.to) != null ? _dest$to : '.'));
-
           const fromMatches = router.matchRoutes(router.location.pathname, {
             strictParseParams: true
           });
           const toMatches = router.matchRoutes(pathname);
-
           const prevParams = _extends({}, (_last = last(fromMatches)) == null ? void 0 : _last.params);
-
           let nextParams = ((_dest$params = dest.params) != null ? _dest$params : true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
-
           if (nextParams) {
             toMatches.map(d => d.options.stringifyParams).filter(Boolean).forEach(fn => {
               Object.assign({}, nextParams, fn(nextParams));
             });
           }
+          pathname = interpolatePath(pathname, nextParams != null ? nextParams : {});
 
-          pathname = interpolatePath(pathname, nextParams != null ? nextParams : {}); // Pre filters first
-
-          const preFilteredSearch = (_dest$__preSearchFilt = dest.__preSearchFilters) != null && _dest$__preSearchFilt.length ? dest.__preSearchFilters.reduce((prev, next) => next(prev), router.location.search) : router.location.search; // Then the link/navigate function
+          // Pre filters first
+          const preFilteredSearch = (_dest$__preSearchFilt = dest.__preSearchFilters) != null && _dest$__preSearchFilt.length ? dest.__preSearchFilters.reduce((prev, next) => next(prev), router.location.search) : router.location.search;
 
+          // Then the link/navigate function
           const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
           : dest.search ? (_functionalUpdate = functionalUpdate(dest.search, preFilteredSearch)) != null ? _functionalUpdate : {} // Updater
           : (_dest$__preSearchFilt2 = dest.__preSearchFilters) != null && _dest$__preSearchFilt2.length ? preFilteredSearch // Preserve resolvedFrom filters
-          : {}; // Then post filters
+          : {};
 
+          // Then post filters
           const postFilteredSearch = (_dest$__postSearchFil = dest.__postSearchFilters) != null && _dest$__postSearchFil.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
           const search = replaceEqualDeep(router.location.search, postFilteredSearch);
           const searchStr = router.options.stringifySearch(search);
@@ -2454,25 +2342,21 @@
           const id = '' + Date.now() + Math.random();
           if (router.navigateTimeout) clearTimeout(router.navigateTimeout);
           let nextAction = 'replace';
-
           if (!replace) {
             nextAction = 'push';
           }
-
           const isSameUrl = router.__.parseLocation(history.location).href === next.href;
-
           if (isSameUrl && !next.key) {
             nextAction = 'replace';
           }
-
           if (nextAction === 'replace') {
             history.replace({
               pathname: next.pathname,
               hash: next.hash,
               search: next.searchStr
-            }, {
+            }, _extends({
               id
-            });
+            }, next.state));
           } else {
             history.push({
               pathname: next.pathname,
@@ -2482,48 +2366,75 @@
               id
             });
           }
-
           router.navigationPromise = new Promise(resolve => {
             const previousNavigationResolve = router.resolveNavigation;
-
             router.resolveNavigation = () => {
               previousNavigationResolve();
               resolve();
+              delete router.navigationPromise;
             };
           });
           return router.navigationPromise;
         }
       }
     };
-    router.location = router.__.parseLocation(history.location);
-    router.state.location = router.location;
-    router.update(userOptions); // Allow frameworks to hook into the router creation
+    router.update(userOptions);
 
+    // Allow frameworks to hook into the router creation
     router.options.createRouter == null ? void 0 : router.options.createRouter(router);
     return router;
   }
-
   function isCtrlEvent(e) {
     return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
   }
+  function cascadeLoaderData(matches) {
+    matches.forEach((match, index) => {
+      const parent = matches[index - 1];
+      if (parent) {
+        match.loaderData = replaceEqualDeep(match.loaderData, _extends({}, parent.loaderData, match.routeLoaderData));
+      }
+    });
+  }
 
   const _excluded = ["type", "children", "target", "activeProps", "inactiveProps", "activeOptions", "disabled", "hash", "search", "params", "to", "preload", "preloadDelay", "preloadMaxAge", "replace", "style", "className", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd"],
-        _excluded2 = ["pending", "caseSensitive", "children"],
-        _excluded3 = ["children", "router"];
+    _excluded2 = ["pending", "caseSensitive", "children"],
+    _excluded3 = ["router"];
+  function lazy(importer) {
+    const lazyComp = /*#__PURE__*/React__namespace.lazy(importer);
+    let promise;
+    let resolvedComp;
+    const forwardedComp = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+      const resolvedCompRef = React__namespace.useRef(resolvedComp || lazyComp);
+      return /*#__PURE__*/React__namespace.createElement(resolvedCompRef.current, _extends$2({}, ref ? {
+        ref
+      } : {}, props));
+    });
+    const finalComp = forwardedComp;
+    finalComp.preload = () => {
+      if (!promise) {
+        promise = importer().then(module => {
+          resolvedComp = module.default;
+          return resolvedComp;
+        });
+      }
+      return promise;
+    };
+    return finalComp;
+  }
   //
-  const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
-  const routerContext = /*#__PURE__*/React__namespace.createContext(null); // Detect if we're in the DOM
 
-  const isDOM = Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
-  const useLayoutEffect = isDOM ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+  function Link(props) {
+    const router = useRouter();
+    return /*#__PURE__*/React__namespace.createElement(router.Link, props);
+  }
+  const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
+  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
   function MatchesProvider(props) {
     return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, props);
   }
-
   const useRouterSubscription = router => {
     shim.useSyncExternalStore(cb => router.subscribe(() => cb()), () => router.state, () => router.state);
   };
-
   function createReactRouter(opts) {
     const makeRouteExt = (route, router) => {
       return {
@@ -2531,7 +2442,6 @@
           if (subRouteId === void 0) {
             subRouteId = '.';
           }
-
           const resolvedRouteId = router.resolvePath(route.routeId, subRouteId);
           const resolvedRoute = router.getRoute(resolvedRouteId);
           useRouterSubscription(router);
@@ -2540,27 +2450,25 @@
         },
         linkProps: options => {
           var _functionalUpdate, _functionalUpdate2;
-
           const {
-            // custom props
-            target,
-            activeProps = () => ({
-              className: 'active'
-            }),
-            inactiveProps = () => ({}),
-            disabled,
-            // element props
-            style,
-            className,
-            onClick,
-            onFocus,
-            onMouseEnter,
-            onMouseLeave
-          } = options,
-                rest = _objectWithoutPropertiesLoose(options, _excluded);
-
+              // custom props
+
+              target,
+              activeProps = () => ({
+                className: 'active'
+              }),
+              inactiveProps = () => ({}),
+              disabled,
+              // element props
+              style,
+              className,
+              onClick,
+              onFocus,
+              onMouseEnter,
+              onMouseLeave
+            } = options,
+            rest = _objectWithoutPropertiesLoose(options, _excluded);
           const linkInfo = route.buildLink(options);
-
           if (linkInfo.type === 'external') {
             const {
               href
@@ -2569,7 +2477,6 @@
               href
             };
           }
-
           const {
             handleClick,
             handleFocus,
@@ -2578,21 +2485,28 @@
             isActive,
             next
           } = linkInfo;
-
+          const reactHandleClick = e => {
+            if (React__namespace.startTransition)
+              // This is a hack for react < 18
+              React__namespace.startTransition(() => {
+                handleClick(e);
+              });else handleClick(e);
+          };
           const composeHandlers = handlers => e => {
             e.persist();
             handlers.forEach(handler => {
               if (handler) handler(e);
             });
-          }; // Get the active props
-
+          };
 
-          const resolvedActiveProps = isActive ? (_functionalUpdate = functionalUpdate(activeProps, {})) != null ? _functionalUpdate : {} : {}; // Get the inactive props
+          // Get the active props
+          const resolvedActiveProps = isActive ? (_functionalUpdate = functionalUpdate(activeProps, {})) != null ? _functionalUpdate : {} : {};
 
+          // Get the inactive props
           const resolvedInactiveProps = isActive ? {} : (_functionalUpdate2 = functionalUpdate(inactiveProps, {})) != null ? _functionalUpdate2 : {};
           return _extends$2({}, resolvedActiveProps, resolvedInactiveProps, rest, {
             href: disabled ? undefined : next.href,
-            onClick: composeHandlers([handleClick, onClick]),
+            onClick: composeHandlers([reactHandleClick, onClick]),
             onFocus: composeHandlers([handleFocus, onFocus]),
             onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
             onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
@@ -2619,25 +2533,21 @@
         }),
         MatchRoute: opts => {
           const {
-            pending,
-            caseSensitive
-          } = opts,
-                rest = _objectWithoutPropertiesLoose(opts, _excluded2);
-
+              pending,
+              caseSensitive
+            } = opts,
+            rest = _objectWithoutPropertiesLoose(opts, _excluded2);
           const params = route.matchRoute(rest, {
             pending,
             caseSensitive
           });
-
           if (!params) {
             return null;
           }
-
           return typeof opts.children === 'function' ? opts.children(params) : opts.children;
         }
       };
     };
-
     const coreRouter = createRouter(_extends$2({}, opts, {
       createRouter: router => {
         const routerExt = {
@@ -2645,24 +2555,20 @@
             useRouterSubscription(router);
             return router.state;
           },
-          useMatch: routeId => {
+          useMatch: (routeId, opts) => {
+            var _opts$strict;
             useRouterSubscription(router);
             invariant(routeId !== rootRouteId, "\"" + rootRouteId + "\" cannot be used with useMatch! Did you mean to useRoute(\"" + rootRouteId + "\")?");
-
-            const runtimeMatch = _useMatch();
-
+            const nearestMatch = useNearestMatch();
             const match = router.state.matches.find(d => d.routeId === routeId);
-            invariant(match, "Could not find a match for route \"" + routeId + "\" being rendered in this component!");
-            invariant(runtimeMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch('" + (match == null ? void 0 : match.routeId) + "') is being called in a component that is meant to render the '" + runtimeMatch.routeId + "' route. Did you mean to 'useRoute(" + (match == null ? void 0 : match.routeId) + ")' instead?");
-
-            if (!match) {
-              invariant('Match not found!');
+            if ((_opts$strict = opts == null ? void 0 : opts.strict) != null ? _opts$strict : true) {
+              invariant(match, "Could not find an active match for \"" + routeId + "\"!");
+              invariant(nearestMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch(\"" + (match == null ? void 0 : match.routeId) + "\") is being called in a component that is meant to render the '" + nearestMatch.routeId + "' route. Did you mean to 'useMatch(\"" + (match == null ? void 0 : match.routeId) + "\", { strict: false })' or 'useRoute(\"" + (match == null ? void 0 : match.routeId) + "\")' instead?");
             }
-
             return match;
           }
         };
-        const routeExt = makeRouteExt(router.getRoute('/'), router);
+        const routeExt = makeRouteExt(router.getRoute(rootRouteId), router);
         Object.assign(router, routerExt, routeExt);
       },
       createRoute: _ref => {
@@ -2673,169 +2579,157 @@
         const routeExt = makeRouteExt(route, router);
         Object.assign(route, routeExt);
       },
-      createElement: async element => {
-        if (typeof element === 'function') {
-          const res = await element(); // Support direct import() calls
-
-          if (typeof res === 'object' && res.default) {
-            return /*#__PURE__*/React__namespace.createElement(res.default);
-          } else {
-            return res;
-          }
+      loadComponent: async component => {
+        if (component.preload && typeof document !== 'undefined') {
+          component.preload();
+          // return await component.preload()
         }
 
-        return element;
+        return component;
       }
     }));
     return coreRouter;
   }
   function RouterProvider(_ref2) {
     let {
-      children,
-      router
-    } = _ref2,
-        rest = _objectWithoutPropertiesLoose(_ref2, _excluded3);
-
+        router
+      } = _ref2,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded3);
     router.update(rest);
     useRouterSubscription(router);
-    useLayoutEffect(() => {
+    React__namespace.useEffect(() => {
       return router.mount();
     }, [router]);
-    return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: {
-        router
+        router: router
       }
     }, /*#__PURE__*/React__namespace.createElement(MatchesProvider, {
-      value: router.state.matches
-    }, children != null ? children : /*#__PURE__*/React__namespace.createElement(Outlet, null)));
+      value: [undefined, ...router.state.matches]
+    }, /*#__PURE__*/React__namespace.createElement(Outlet, null))));
   }
-
   function useRouter() {
     const value = React__namespace.useContext(routerContext);
     warning(!value, 'useRouter must be used inside a <Router> component!');
     useRouterSubscription(value.router);
     return value.router;
   }
-
   function useMatches() {
     return React__namespace.useContext(matchesContext);
-  } // function useParentMatches(): RouteMatch[] {
-  //   const router = useRouter()
-  //   const match = useMatch()
-  //   const matches = router.state.matches
-  //   return matches.slice(
-  //     0,
-  //     matches.findIndex((d) => d.matchId === match.matchId) - 1,
-  //   )
-  // }
-
-
-  function _useMatch() {
-    var _useMatches;
-
-    return (_useMatches = useMatches()) == null ? void 0 : _useMatches[0];
   }
-
+  function useMatch(routeId, opts) {
+    const router = useRouter();
+    return router.useMatch(routeId, opts);
+  }
+  function useNearestMatch() {
+    const runtimeMatch = useMatches()[0];
+    invariant(runtimeMatch, "Could not find a nearest match!");
+    return runtimeMatch;
+  }
+  function useRoute(routeId) {
+    const router = useRouter();
+    return router.useRoute(routeId);
+  }
+  function useSearch(_routeId) {
+    return useRouter().state.location.search;
+  }
+  function linkProps(props) {
+    const router = useRouter();
+    return router.linkProps(props);
+  }
+  function MatchRoute(props) {
+    const router = useRouter();
+    return /*#__PURE__*/React__namespace.createElement(router.MatchRoute, props);
+  }
   function Outlet() {
-    var _childMatch$options$c;
-
+    var _ref3, _match$__$pendingComp, _match$__$errorCompon;
     const router = useRouter();
-    const [, ...matches] = useMatches();
-    const childMatch = matches[0];
-    if (!childMatch) return null;
-
-    const element = (() => {
-      var _childMatch$__$errorE, _ref4;
-
-      if (!childMatch) {
-        return null;
-      }
-
-      const errorElement = (_childMatch$__$errorE = childMatch.__.errorElement) != null ? _childMatch$__$errorE : router.options.defaultErrorElement;
-
-      if (childMatch.status === 'error') {
-        if (errorElement) {
-          return errorElement;
-        }
-
-        if (childMatch.options.useErrorBoundary || router.options.useErrorBoundary) {
-          throw childMatch.error;
-        }
-
-        return /*#__PURE__*/React__namespace.createElement(DefaultErrorBoundary, {
-          error: childMatch.error
-        });
-      }
-
-      if (childMatch.status === 'loading' || childMatch.status === 'idle') {
-        if (childMatch.isPending) {
-          var _childMatch$__$pendin;
-
-          const pendingElement = (_childMatch$__$pendin = childMatch.__.pendingElement) != null ? _childMatch$__$pendin : router.options.defaultPendingElement;
-
-          if (childMatch.options.pendingMs || pendingElement) {
-            var _ref3;
-
-            return (_ref3 = pendingElement) != null ? _ref3 : null;
-          }
-        }
-
-        return null;
-      }
-
-      return (_ref4 = childMatch.__.element) != null ? _ref4 : router.options.defaultElement;
-    })();
-
-    const catchElement = (_childMatch$options$c = childMatch == null ? void 0 : childMatch.options.catchElement) != null ? _childMatch$options$c : router.options.defaultCatchElement;
+    const matches = useMatches().slice(1);
+    const match = matches[0];
+    const defaultPending = React__namespace.useCallback(() => null, []);
+    if (!match) {
+      return null;
+    }
+    const PendingComponent = (_ref3 = (_match$__$pendingComp = match.__.pendingComponent) != null ? _match$__$pendingComp : router.options.defaultPendingComponent) != null ? _ref3 : defaultPending;
+    const errorComponent = (_match$__$errorCompon = match.__.errorComponent) != null ? _match$__$errorCompon : router.options.defaultErrorComponent;
     return /*#__PURE__*/React__namespace.createElement(MatchesProvider, {
-      value: matches,
-      key: childMatch.matchId
+      value: matches
+    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+      fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, null)
     }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      catchElement: catchElement
-    }, element));
+      key: match.routeId,
+      errorComponent: errorComponent,
+      match: match
+    }, (() => {
+      if (match.status === 'error') {
+        throw match.error;
+      }
+      if (match.status === 'success') {
+        var _ref4, _ref5;
+        return /*#__PURE__*/React__namespace.createElement((_ref4 = (_ref5 = match.__.component) != null ? _ref5 : router.options.defaultComponent) != null ? _ref4 : Outlet);
+      }
+      throw match.__.loadPromise;
+    })())));
   }
-
   class CatchBoundary extends React__namespace.Component {
     constructor() {
       super(...arguments);
       this.state = {
-        error: false
-      };
-
-      this.reset = () => {
-        this.setState({
-          error: false,
-          info: false
-        });
+        error: false,
+        info: undefined
       };
     }
-
     componentDidCatch(error, info) {
+      console.error("Error in route match: " + this.props.match.matchId);
       console.error(error);
       this.setState({
         error,
         info
       });
     }
-
     render() {
-      var _this$props$catchElem;
-
-      const catchElement = (_this$props$catchElem = this.props.catchElement) != null ? _this$props$catchElem : DefaultErrorBoundary;
+      return /*#__PURE__*/React__namespace.createElement(CatchBoundaryInner, _extends$2({}, this.props, {
+        errorState: this.state,
+        reset: () => this.setState({})
+      }));
+    }
+  }
 
-      if (this.state.error) {
-        return typeof catchElement === 'function' ? catchElement(this.state) : catchElement;
+  // This is the messiest thing ever... I'm either seriously tired (likely) or
+  // there has to be a better way to reset error boundaries when the
+  // router's location key changes.
+  function CatchBoundaryInner(props) {
+    var _props$errorComponent;
+    const [activeErrorState, setActiveErrorState] = React__namespace.useState(props.errorState);
+    const router = useRouter();
+    const errorComponent = (_props$errorComponent = props.errorComponent) != null ? _props$errorComponent : DefaultErrorBoundary;
+    React__namespace.useEffect(() => {
+      if (activeErrorState) {
+        let prevKey = router.state.location.key;
+        return router.subscribe(() => {
+          if (router.state.location.key !== prevKey) {
+            prevKey = router.state.location.key;
+            setActiveErrorState({});
+          }
+        });
       }
-
-      return this.props.children;
+      return;
+    }, [activeErrorState]);
+    React__namespace.useEffect(() => {
+      if (props.errorState.error) {
+        setActiveErrorState(props.errorState);
+      }
+      props.reset();
+    }, [props.errorState.error]);
+    if (activeErrorState.error) {
+      return /*#__PURE__*/React__namespace.createElement(errorComponent, activeErrorState);
     }
-
+    return props.children;
   }
-
-  function DefaultErrorBoundary(_ref5) {
+  function DefaultErrorBoundary(_ref6) {
     let {
       error
-    } = _ref5;
+    } = _ref6;
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         padding: '.5rem',
@@ -2857,18 +2751,7 @@
         padding: '.5rem',
         color: 'red'
       }
-    }, error.message) : null)), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        height: '1rem'
-      }
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        fontSize: '.8em',
-        borderLeft: '3px solid rgba(127, 127, 127, 1)',
-        paddingLeft: '.5rem',
-        opacity: 0.5
-      }
-    }, "If you are the owner of this website, it's highly recommended that you configure your own custom Catch/Error boundaries for the router. You can optionally configure a boundary for each route."));
+    }, error.message) : null)));
   }
   function usePrompt(message, when) {
     const router = useRouter();
@@ -2885,22 +2768,23 @@
       return unblock;
     }, [when, location, message]);
   }
-  function Prompt(_ref6) {
+  function Prompt(_ref7) {
     let {
       message,
       when,
       children
-    } = _ref6;
+    } = _ref7;
     usePrompt(message, when != null ? when : true);
     return children != null ? children : null;
   }
 
   exports.DefaultErrorBoundary = DefaultErrorBoundary;
+  exports.Link = Link;
+  exports.MatchRoute = MatchRoute;
   exports.MatchesProvider = MatchesProvider;
   exports.Outlet = Outlet;
   exports.Prompt = Prompt;
   exports.RouterProvider = RouterProvider;
-  exports.cascadeLoaderData = cascadeLoaderData;
   exports.cleanPath = cleanPath;
   exports.createBrowserHistory = createBrowserHistory;
   exports.createHashHistory = createHashHistory;
@@ -2919,18 +2803,29 @@
   exports.invariant = invariant;
   exports.joinPaths = joinPaths;
   exports.last = last;
+  exports.lazy = lazy;
+  exports.linkProps = linkProps;
   exports.matchByPath = matchByPath;
   exports.matchPathname = matchPathname;
+  exports.matchesContext = matchesContext;
   exports.parsePathname = parsePathname;
   exports.parseSearchWith = parseSearchWith;
+  exports.pick = pick;
   exports.replaceEqualDeep = replaceEqualDeep;
   exports.resolvePath = resolvePath;
   exports.rootRouteId = rootRouteId;
+  exports.routerContext = routerContext;
   exports.stringifySearchWith = stringifySearchWith;
   exports.trimPath = trimPath;
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
+  exports.useMatch = useMatch;
+  exports.useMatches = useMatches;
+  exports.useNearestMatch = useNearestMatch;
   exports.usePrompt = usePrompt;
+  exports.useRoute = useRoute;
+  exports.useRouter = useRouter;
+  exports.useSearch = useSearch;
   exports.warning = warning;
 
   Object.defineProperty(exports, '__esModule', { value: true });