@tanstack/react-router 1.6.0 → 1.7.0

package/build/umd/index.development.js

@@ -359,69 +359,6 @@
     }
   }
 
-  exports.routerContext = /*#__PURE__*/React__namespace.createContext(null);
-  if (typeof document !== 'undefined') {
-    if (window.__TSR_ROUTER_CONTEXT__) {
-      exports.routerContext = window.__TSR_ROUTER_CONTEXT__;
-    } else {
-      window.__TSR_ROUTER_CONTEXT__ = exports.routerContext;
-    }
-  }
-
-  function useRouter(opts) {
-    const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || exports.routerContext : exports.routerContext;
-    const value = React__namespace.useContext(resolvedContext);
-    warning(!((opts?.warn ?? true) && !value), 'useRouter must be used inside a <RouterProvider> component!');
-    return value;
-  }
-
-  function defer(_promise) {
-    const promise = _promise;
-    if (!promise.__deferredState) {
-      promise.__deferredState = {
-        uid: Math.random().toString(36).slice(2),
-        status: 'pending'
-      };
-      const state = promise.__deferredState;
-      promise.then(data => {
-        state.status = 'success';
-        state.data = data;
-      }).catch(error => {
-        state.status = 'error';
-        state.error = error;
-      });
-    }
-    return promise;
-  }
-  function isDehydratedDeferred(obj) {
-    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
-  }
-
-  function useAwaited({
-    promise
-  }) {
-    const router = useRouter();
-    let state = promise.__deferredState;
-    const key = `__TSR__DEFERRED__${state.uid}`;
-    if (isDehydratedDeferred(promise)) {
-      state = router.hydrateData(key);
-      promise = Promise.resolve(state.data);
-      promise.__deferredState = state;
-    }
-    if (state.status === 'pending') {
-      throw promise;
-    }
-    if (state.status === 'error') {
-      throw state.error;
-    }
-    router.dehydrateData(key, state);
-    return [state.data];
-  }
-  function Await(props) {
-    const awaited = useAwaited(props);
-    return props.children(...awaited);
-  }
-
   function CatchBoundary(props) {
     const errorComponent = props.errorComponent ?? ErrorComponent;
     return /*#__PURE__*/React__namespace.createElement(CatchBoundaryImpl, {
@@ -779,6 +716,22 @@
     return true;
   }
 
+  exports.routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  if (typeof document !== 'undefined') {
+    if (window.__TSR_ROUTER_CONTEXT__) {
+      exports.routerContext = window.__TSR_ROUTER_CONTEXT__;
+    } else {
+      window.__TSR_ROUTER_CONTEXT__ = exports.routerContext;
+    }
+  }
+
+  function useRouter(opts) {
+    const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || exports.routerContext : exports.routerContext;
+    const value = React__namespace.useContext(resolvedContext);
+    warning(!((opts?.warn ?? true) && !value), 'useRouter must be used inside a <RouterProvider> component!');
+    return value;
+  }
+
   function useRouterState(opts) {
     const contextRouter = useRouter({
       warn: opts?.router === undefined
@@ -1050,7 +1003,12 @@
       select: s => pick(getRenderedMatches(s).find(d => d.id === matchId), ['status', 'error', 'showPending', 'loadPromise'])
     });
     if (match.status === 'error') {
-      throw match.error;
+      if (isServerSideError(match.error)) {
+        const deserializeError = router.options.errorSerializer?.deserialize ?? defaultDeserializeError;
+        throw deserializeError(match.error.data);
+      } else {
+        throw match.error;
+      }
     }
     if (match.status === 'pending') {
       if (match.showPending) {
@@ -1171,114 +1129,353 @@
       }
     });
   }
-
-  function joinPaths(paths) {
-    return cleanPath(paths.filter(Boolean).join('/'));
-  }
-  function cleanPath(path) {
-    // remove double slashes
-    return path.replace(/\/{2,}/g, '/');
-  }
-  function trimPathLeft(path) {
-    return path === '/' ? path : path.replace(/^\/{1,}/, '');
+  function isServerSideError(error) {
+    if (!(typeof error === 'object' && error && 'data' in error)) return false;
+    if (!('__isServerError' in error && error.__isServerError)) return false;
+    if (!(typeof error.data === 'object' && error.data)) return false;
+    return error.__isServerError === true;
+  }
+  function defaultDeserializeError(serializedData) {
+    if ('name' in serializedData && 'message' in serializedData) {
+      const error = new Error(serializedData.message);
+      error.name = serializedData.name;
+      return error;
+    }
+    return serializedData.data;
   }
-  function trimPathRight(path) {
-    return path === '/' ? path : path.replace(/\/{1,}$/, '');
+
+  // @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 = '';
+    for (k in obj) {
+      if ((tmp = obj[k]) !== void 0) {
+        if (Array.isArray(tmp)) {
+          for (i = 0; i < tmp.length; i++) {
+            str && (str += '&');
+            str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i]);
+          }
+        } else {
+          str && (str += '&');
+          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp);
+        }
+      }
+    }
+    return (pfx || '') + str;
   }
-  function trimPath(path) {
-    return trimPathRight(trimPathLeft(path));
+  function toValue(mix) {
+    if (!mix) return '';
+    var str = decodeURIComponent(mix);
+    if (str === 'false') return false;
+    if (str === 'true') return true;
+    return +str * 0 === 0 && +str + '' === str ? +str : str;
   }
-  function resolvePath(basepath, base, to) {
-    base = base.replace(new RegExp(`^${basepath}`), '/');
-    to = to.replace(new RegExp(`^${basepath}`), '/');
-    let baseSegments = parsePathname(base);
-    const toSegments = parsePathname(to);
-    toSegments.forEach((toSegment, index) => {
-      if (toSegment.value === '/') {
-        if (!index) {
-          // Leading slash
-          baseSegments = [toSegment];
-        } else if (index === toSegments.length - 1) {
-          // Trailing Slash
-          baseSegments.push(toSegment);
-        } else ;
-      } else if (toSegment.value === '..') {
-        // Extra trailing slash? pop it off
-        if (baseSegments.length > 1 && last(baseSegments)?.value === '/') {
-          baseSegments.pop();
-        }
-        baseSegments.pop();
-      } else if (toSegment.value === '.') {
-        return;
+  function decode(str) {
+    var tmp,
+      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 {
-        baseSegments.push(toSegment);
+        out[k] = toValue(tmp.shift());
       }
-    });
-    const joined = joinPaths([basepath, ...baseSegments.map(d => d.value)]);
-    return cleanPath(joined);
-  }
-  function parsePathname(pathname) {
-    if (!pathname) {
-      return [];
-    }
-    pathname = cleanPath(pathname);
-    const segments = [];
-    if (pathname.slice(0, 1) === '/') {
-      pathname = pathname.substring(1);
-      segments.push({
-        type: 'pathname',
-        value: '/'
-      });
-    }
-    if (!pathname) {
-      return segments;
     }
+    return out;
+  }
 
-    // Remove empty segments and '.' segments
-    const split = pathname.split('/').filter(Boolean);
-    segments.push(...split.map(part => {
-      if (part === '$' || part === '*') {
-        return {
-          type: 'wildcard',
-          value: part
-        };
+  const defaultParseSearch = parseSearchWith(JSON.parse);
+  const defaultStringifySearch = stringifySearchWith(JSON.stringify, JSON.parse);
+  function parseSearchWith(parser) {
+    return searchStr => {
+      if (searchStr.substring(0, 1) === '?') {
+        searchStr = searchStr.substring(1);
       }
-      if (part.charAt(0) === '$') {
-        return {
-          type: 'param',
-          value: part
-        };
+      let query = decode(searchStr);
+
+      // 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) {
+            //
+          }
+        }
       }
-      return {
-        type: 'pathname',
-        value: part
-      };
-    }));
-    if (pathname.slice(-1) === '/') {
-      pathname = pathname.substring(1);
-      segments.push({
-        type: 'pathname',
-        value: '/'
-      });
-    }
-    return segments;
+      return query;
+    };
   }
-  function interpolatePath(path, params, leaveWildcards = false) {
-    const interpolatedPathSegments = parsePathname(path);
-    return joinPaths(interpolatedPathSegments.map(segment => {
-      if (segment.type === 'wildcard') {
-        const value = params[segment.value];
-        if (leaveWildcards) return `${segment.value}${value ?? ''}`;
-        return value;
-      }
-      if (segment.type === 'param') {
-        return params[segment.value.substring(1)] ?? 'undefined';
+  function stringifySearchWith(stringify, parser) {
+    function stringifyValue(val) {
+      if (typeof val === 'object' && val !== null) {
+        try {
+          return stringify(val);
+        } catch (err) {
+          // silent
+        }
+      } else if (typeof val === 'string' && typeof parser === 'function') {
+        try {
+          // Check if it's a valid parseable string.
+          // If it is, then stringify it again.
+          parser(val);
+          return stringify(val);
+        } catch (err) {
+          // silent
+        }
       }
-      return segment.value;
-    }));
-  }
-  function matchPathname(basepath, currentPathname, matchLocation) {
-    const pathParams = matchByPath(basepath, currentPathname, matchLocation);
+      return val;
+    }
+    return search => {
+      search = {
+        ...search
+      };
+      if (search) {
+        Object.keys(search).forEach(key => {
+          const val = search[key];
+          if (typeof val === 'undefined' || val === undefined) {
+            delete search[key];
+          } else {
+            search[key] = stringifyValue(val);
+          }
+        });
+      }
+      const searchStr = encode(search).toString();
+      return searchStr ? `?${searchStr}` : '';
+    };
+  }
+
+  const useTransition = React__namespace.useTransition || (() => [false, cb => {
+    cb();
+  }]);
+  function RouterProvider({
+    router,
+    ...rest
+  }) {
+    // Allow the router to update options on the router instance
+    router.update({
+      ...router.options,
+      ...rest,
+      context: {
+        ...router.options.context,
+        ...rest?.context
+      }
+    });
+    const matches = router.options.InnerWrap ? /*#__PURE__*/React__namespace.createElement(router.options.InnerWrap, null, /*#__PURE__*/React__namespace.createElement(Matches, null)) : /*#__PURE__*/React__namespace.createElement(Matches, null);
+    const provider = /*#__PURE__*/React__namespace.createElement(exports.routerContext.Provider, {
+      value: router
+    }, matches, /*#__PURE__*/React__namespace.createElement(Transitioner, null));
+    if (router.options.Wrap) {
+      return /*#__PURE__*/React__namespace.createElement(router.options.Wrap, null, provider);
+    }
+    return provider;
+  }
+  function Transitioner() {
+    const mountLoadCount = React__namespace.useRef(0);
+    const router = useRouter();
+    const routerState = useRouterState({
+      select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
+    });
+    const [isTransitioning, startReactTransition] = useTransition();
+    router.startReactTransition = startReactTransition;
+    React__namespace.useEffect(() => {
+      if (isTransitioning) {
+        router.__store.setState(s => ({
+          ...s,
+          isTransitioning
+        }));
+      }
+    }, [isTransitioning]);
+    const tryLoad = () => {
+      const apply = cb => {
+        if (!routerState.isTransitioning) {
+          startReactTransition(() => cb());
+        } else {
+          cb();
+        }
+      };
+      apply(() => {
+        try {
+          router.load();
+        } catch (err) {
+          console.error(err);
+        }
+      });
+    };
+    useLayoutEffect$1(() => {
+      const unsub = router.history.subscribe(() => {
+        router.latestLocation = router.parseLocation(router.latestLocation);
+        if (routerState.location !== router.latestLocation) {
+          tryLoad();
+        }
+      });
+      const nextLocation = router.buildLocation({
+        search: true,
+        params: true,
+        hash: true,
+        state: true
+      });
+      if (routerState.location.href !== nextLocation.href) {
+        router.commitLocation({
+          ...nextLocation,
+          replace: true
+        });
+      }
+      return () => {
+        unsub();
+      };
+    }, [router.history]);
+    useLayoutEffect$1(() => {
+      if (React__namespace.useTransition ? routerState.isTransitioning && !isTransitioning : !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
+        router.emit({
+          type: 'onResolved',
+          fromLocation: routerState.resolvedLocation,
+          toLocation: routerState.location,
+          pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
+        });
+        if (document.querySelector) {
+          if (routerState.location.hash !== '') {
+            const el = document.getElementById(routerState.location.hash);
+            if (el) {
+              el.scrollIntoView();
+            }
+          }
+        }
+        router.__store.setState(s => ({
+          ...s,
+          isTransitioning: false,
+          resolvedLocation: s.location
+        }));
+      }
+    }, [routerState.isTransitioning, isTransitioning, routerState.isLoading, routerState.resolvedLocation, routerState.location]);
+    useLayoutEffect$1(() => {
+      if (!window.__TSR_DEHYDRATED__ && !mountLoadCount.current) {
+        mountLoadCount.current++;
+        tryLoad();
+      }
+    }, []);
+    return null;
+  }
+  function getRouteMatch(state, id) {
+    return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
+  }
+
+  function joinPaths(paths) {
+    return cleanPath(paths.filter(Boolean).join('/'));
+  }
+  function cleanPath(path) {
+    // remove double slashes
+    return path.replace(/\/{2,}/g, '/');
+  }
+  function trimPathLeft(path) {
+    return path === '/' ? path : path.replace(/^\/{1,}/, '');
+  }
+  function trimPathRight(path) {
+    return path === '/' ? path : path.replace(/\/{1,}$/, '');
+  }
+  function trimPath(path) {
+    return trimPathRight(trimPathLeft(path));
+  }
+  function resolvePath(basepath, base, to) {
+    base = base.replace(new RegExp(`^${basepath}`), '/');
+    to = to.replace(new RegExp(`^${basepath}`), '/');
+    let baseSegments = parsePathname(base);
+    const toSegments = parsePathname(to);
+    toSegments.forEach((toSegment, index) => {
+      if (toSegment.value === '/') {
+        if (!index) {
+          // Leading slash
+          baseSegments = [toSegment];
+        } else if (index === toSegments.length - 1) {
+          // Trailing Slash
+          baseSegments.push(toSegment);
+        } else ;
+      } else if (toSegment.value === '..') {
+        // Extra trailing slash? pop it off
+        if (baseSegments.length > 1 && last(baseSegments)?.value === '/') {
+          baseSegments.pop();
+        }
+        baseSegments.pop();
+      } else if (toSegment.value === '.') {
+        return;
+      } else {
+        baseSegments.push(toSegment);
+      }
+    });
+    const joined = joinPaths([basepath, ...baseSegments.map(d => d.value)]);
+    return cleanPath(joined);
+  }
+  function parsePathname(pathname) {
+    if (!pathname) {
+      return [];
+    }
+    pathname = cleanPath(pathname);
+    const segments = [];
+    if (pathname.slice(0, 1) === '/') {
+      pathname = pathname.substring(1);
+      segments.push({
+        type: 'pathname',
+        value: '/'
+      });
+    }
+    if (!pathname) {
+      return segments;
+    }
+
+    // Remove empty segments and '.' segments
+    const split = pathname.split('/').filter(Boolean);
+    segments.push(...split.map(part => {
+      if (part === '$' || part === '*') {
+        return {
+          type: 'wildcard',
+          value: part
+        };
+      }
+      if (part.charAt(0) === '$') {
+        return {
+          type: 'param',
+          value: part
+        };
+      }
+      return {
+        type: 'pathname',
+        value: part
+      };
+    }));
+    if (pathname.slice(-1) === '/') {
+      pathname = pathname.substring(1);
+      segments.push({
+        type: 'pathname',
+        value: '/'
+      });
+    }
+    return segments;
+  }
+  function interpolatePath(path, params, leaveWildcards = false) {
+    const interpolatedPathSegments = parsePathname(path);
+    return joinPaths(interpolatedPathSegments.map(segment => {
+      if (segment.type === 'wildcard') {
+        const value = params[segment.value];
+        if (leaveWildcards) return `${segment.value}${value ?? ''}`;
+        return value;
+      }
+      if (segment.type === 'param') {
+        return params[segment.value.substring(1)] ?? 'undefined';
+      }
+      return segment.value;
+    }));
+  }
+  function matchPathname(basepath, currentPathname, matchLocation) {
+    const pathParams = matchByPath(basepath, currentPathname, matchLocation);
     // const searchMatched = matchBySearch(location.search, matchLocation)
 
     if (matchLocation.to && !pathParams) {
@@ -1363,1827 +1560,1684 @@
     return isMatch ? params : undefined;
   }
 
-  function useParams(opts) {
-    return useRouterState({
-      select: state => {
-        const params = last(getRenderedMatches(state))?.params;
-        return opts?.select ? opts.select(params) : params;
-      }
-    });
-  }
+  // Detect if we're in the DOM
 
-  function useSearch(opts) {
-    return useMatch({
-      ...opts,
-      select: match => {
-        return opts?.select ? opts.select(match.search) : match.search;
-      }
-    });
+  function redirect(opts) {
+    opts.isRedirect = true;
+    if (opts.throw) {
+      throw opts;
+    }
+    return opts;
+  }
+  function isRedirect(obj) {
+    return !!obj?.isRedirect;
   }
 
-  const rootRouteId = '__root__';
-
-  // The parse type here allows a zod schema to be passed directly to the validator
-
-  // TODO: This is part of a future APi to move away from classes and
-  // towards a more functional API. It's not ready yet.
-
-  // type RouteApiInstance<
-  //   TId extends RouteIds<RegisteredRouter['routeTree']>,
-  //   TRoute extends AnyRoute = RouteById<RegisteredRouter['routeTree'], TId>,
-  //   TFullSearchSchema extends Record<
-  //     string,
-  //     any
-  //   > = TRoute['types']['fullSearchSchema'],
-  //   TAllParams extends AnyPathParams = TRoute['types']['allParams'],
-  //   TAllContext extends Record<string, any> = TRoute['types']['allContext'],
-  //   TLoaderDeps extends Record<string, any> = TRoute['types']['loaderDeps'],
-  //   TLoaderData extends any = TRoute['types']['loaderData'],
-  // > = {
-  //   id: TId
-  //   useMatch: <TSelected = TAllContext>(opts?: {
-  //     select?: (s: TAllContext) => TSelected
-  //   }) => TSelected
-
-  //   useRouteContext: <TSelected = TAllContext>(opts?: {
-  //     select?: (s: TAllContext) => TSelected
-  //   }) => TSelected
-
-  //   useSearch: <TSelected = TFullSearchSchema>(opts?: {
-  //     select?: (s: TFullSearchSchema) => TSelected
-  //   }) => TSelected
-
-  //   useParams: <TSelected = TAllParams>(opts?: {
-  //     select?: (s: TAllParams) => TSelected
-  //   }) => TSelected
-
-  //   useLoaderDeps: <TSelected = TLoaderDeps>(opts?: {
-  //     select?: (s: TLoaderDeps) => TSelected
-  //   }) => TSelected
-
-  //   useLoaderData: <TSelected = TLoaderData>(opts?: {
-  //     select?: (s: TLoaderData) => TSelected
-  //   }) => TSelected
-  // }
-
-  // export function RouteApi_v2<
-  //   TId extends RouteIds<RegisteredRouter['routeTree']>,
-  //   TRoute extends AnyRoute = RouteById<RegisteredRouter['routeTree'], TId>,
-  //   TFullSearchSchema extends Record<
-  //     string,
-  //     any
-  //   > = TRoute['types']['fullSearchSchema'],
-  //   TAllParams extends AnyPathParams = TRoute['types']['allParams'],
-  //   TAllContext extends Record<string, any> = TRoute['types']['allContext'],
-  //   TLoaderDeps extends Record<string, any> = TRoute['types']['loaderDeps'],
-  //   TLoaderData extends any = TRoute['types']['loaderData'],
-  // >({
-  //   id,
-  // }: {
-  //   id: TId
-  // }): RouteApiInstance<
-  //   TId,
-  //   TRoute,
-  //   TFullSearchSchema,
-  //   TAllParams,
-  //   TAllContext,
-  //   TLoaderDeps,
-  //   TLoaderData
-  // > {
-  //   return {
-  //     id,
-
-  //     useMatch: (opts) => {
-  //       return useMatch({ ...opts, from: id })
-  //     },
-
-  //     useRouteContext: (opts) => {
-  //       return useMatch({
-  //         ...opts,
-  //         from: id,
-  //         select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
-  //       } as any)
-  //     },
-
-  //     useSearch: (opts) => {
-  //       return useSearch({ ...opts, from: id } as any)
-  //     },
-
-  //     useParams: (opts) => {
-  //       return useParams({ ...opts, from: id } as any)
-  //     },
-
-  //     useLoaderDeps: (opts) => {
-  //       return useLoaderDeps({ ...opts, from: id } as any) as any
-  //     },
-
-  //     useLoaderData: (opts) => {
-  //       return useLoaderData({ ...opts, from: id } as any) as any
-  //     },
-  //   }
-  // }
+  // import warning from 'tiny-warning'
 
-  class RouteApi {
-    constructor({
-      id
-    }) {
-      this.id = id;
-    }
-    useMatch = opts => {
-      return useMatch({
-        select: opts?.select,
-        from: this.id
-      });
-    };
-    useRouteContext = opts => {
-      return useMatch({
-        from: this.id,
-        select: d => opts?.select ? opts.select(d.context) : d.context
-      });
-    };
-    useSearch = opts => {
-      return useSearch({
-        ...opts,
-        from: this.id
-      });
-    };
-    useParams = opts => {
-      return useParams({
-        ...opts,
-        from: this.id
-      });
-    };
-    useLoaderDeps = opts => {
-      return useLoaderDeps({
-        ...opts,
-        from: this.id
-      });
-    };
-    useLoaderData = opts => {
-      return useLoaderData({
-        ...opts,
-        from: this.id
-      });
-    };
-  }
-  class Route {
-    // Set up in this.init()
+  //
 
-    // customId!: TCustomId
+  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+  class Router {
+    // Option-independent properties
+    tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
+    resetNextScroll = true;
+    navigateTimeout = null;
+    latestLoadPromise = Promise.resolve();
+    subscribers = new Set();
+    injectedHtml = [];
 
-    // Optional
+    // Must build in constructor
 
     constructor(options) {
-      this.options = options || {};
-      this.isRoot = !options?.getParentRoute;
-      invariant(!(options?.id && options?.path), `Route cannot have both an 'id' and a 'path' option.`);
-      this.$$typeof = Symbol.for('react.memo');
+      this.update({
+        defaultPreloadDelay: 50,
+        defaultPendingMs: 1000,
+        defaultPendingMinMs: 500,
+        context: undefined,
+        ...options,
+        stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+        parseSearch: options?.parseSearch ?? defaultParseSearch
+      });
     }
-    init = opts => {
-      this.originalIndex = opts.originalIndex;
-      const options = this.options;
-      const isRoot = !options?.path && !options?.id;
-      this.parentRoute = this.options?.getParentRoute?.();
-      if (isRoot) {
-        this.path = rootRouteId;
-      } else {
-        invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
-      }
-      let path = isRoot ? rootRouteId : options.path;
 
-      // If the path is anything other than an index path, trim it up
-      if (path && path !== '/') {
-        path = trimPath(path);
+    // These are default implementations that can optionally be overridden
+    // by the router provider once rendered. We provide these so that the
+    // router can be used in a non-react environment if necessary
+    startReactTransition = fn => fn();
+    update = newOptions => {
+      const previousOptions = this.options;
+      this.options = {
+        ...this.options,
+        ...newOptions
+      };
+      if (!this.basepath || newOptions.basepath && newOptions.basepath !== previousOptions.basepath) {
+        if (newOptions.basepath === undefined || newOptions.basepath === '' || newOptions.basepath === '/') {
+          this.basepath = '/';
+        } else {
+          this.basepath = `/${trimPath(newOptions.basepath)}`;
+        }
       }
-      const customId = options?.id || path;
-
-      // Strip the parentId prefix from the first level of children
-      let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
-      if (path === rootRouteId) {
-        path = '/';
+      if (!this.history || this.options.history && this.options.history !== this.history) {
+        this.history = this.options.history ?? (typeof document !== 'undefined' ? createBrowserHistory() : createMemoryHistory({
+          initialEntries: [this.options.basepath || '/']
+        }));
+        this.latestLocation = this.parseLocation();
       }
-      if (id !== rootRouteId) {
-        id = joinPaths(['/', id]);
+      if (this.options.routeTree !== this.routeTree) {
+        this.routeTree = this.options.routeTree;
+        this.buildRouteTree();
+      }
+      if (!this.__store) {
+        this.__store = new Store(getInitialRouterState(this.latestLocation), {
+          onUpdate: () => {
+            this.__store.state = {
+              ...this.state,
+              status: this.state.isTransitioning || this.state.isLoading ? 'pending' : 'idle'
+            };
+          }
+        });
       }
-      const fullPath = id === rootRouteId ? '/' : joinPaths([this.parentRoute.fullPath, path]);
-      this.path = path;
-      this.id = id;
-      // this.customId = customId as TCustomId
-      this.fullPath = fullPath;
-      this.to = fullPath;
-    };
-    addChildren = children => {
-      this.children = children;
-      return this;
-    };
-    updateLoader = options => {
-      Object.assign(this.options, options);
-      return this;
     };
-    update = options => {
-      Object.assign(this.options, options);
-      return this;
-    };
-    useMatch = opts => {
-      return useMatch({
-        ...opts,
-        from: this.id
+    get state() {
+      return this.__store.state;
+    }
+    buildRouteTree = () => {
+      this.routesById = {};
+      this.routesByPath = {};
+      const notFoundRoute = this.options.notFoundRoute;
+      if (notFoundRoute) {
+        notFoundRoute.init({
+          originalIndex: 99999999999
+        });
+        this.routesById[notFoundRoute.id] = notFoundRoute;
+      }
+      const recurseRoutes = childRoutes => {
+        childRoutes.forEach((childRoute, i) => {
+          childRoute.init({
+            originalIndex: i
+          });
+          const existingRoute = this.routesById[childRoute.id];
+          invariant(!existingRoute, `Duplicate routes found with id: ${String(childRoute.id)}`);
+          this.routesById[childRoute.id] = childRoute;
+          if (!childRoute.isRoot && childRoute.path) {
+            const trimmedFullPath = trimPathRight(childRoute.fullPath);
+            if (!this.routesByPath[trimmedFullPath] || childRoute.fullPath.endsWith('/')) {
+              this.routesByPath[trimmedFullPath] = childRoute;
+            }
+          }
+          const children = childRoute.children;
+          if (children?.length) {
+            recurseRoutes(children);
+          }
+        });
+      };
+      recurseRoutes([this.routeTree]);
+      const scoredRoutes = [];
+      Object.values(this.routesById).forEach((d, i) => {
+        if (d.isRoot || !d.path) {
+          return;
+        }
+        const trimmed = trimPathLeft(d.fullPath);
+        const parsed = parsePathname(trimmed);
+        while (parsed.length > 1 && parsed[0]?.value === '/') {
+          parsed.shift();
+        }
+        const scores = parsed.map(d => {
+          if (d.value === '/') {
+            return 0.75;
+          }
+          if (d.type === 'param') {
+            return 0.5;
+          }
+          if (d.type === 'wildcard') {
+            return 0.25;
+          }
+          return 1;
+        });
+        scoredRoutes.push({
+          child: d,
+          trimmed,
+          parsed,
+          index: i,
+          scores
+        });
       });
-    };
-    useRouteContext = opts => {
-      return useMatch({
-        ...opts,
-        from: this.id,
-        select: d => opts?.select ? opts.select(d.context) : d.context
+      this.flatRoutes = scoredRoutes.sort((a, b) => {
+        const minLength = Math.min(a.scores.length, b.scores.length);
+
+        // Sort by min available score
+        for (let i = 0; i < minLength; i++) {
+          if (a.scores[i] !== b.scores[i]) {
+            return b.scores[i] - a.scores[i];
+          }
+        }
+
+        // Sort by length of score
+        if (a.scores.length !== b.scores.length) {
+          return b.scores.length - a.scores.length;
+        }
+
+        // Sort by min available parsed value
+        for (let i = 0; i < minLength; i++) {
+          if (a.parsed[i].value !== b.parsed[i].value) {
+            return a.parsed[i].value > b.parsed[i].value ? 1 : -1;
+          }
+        }
+
+        // Sort by original index
+        return a.index - b.index;
+      }).map((d, i) => {
+        d.child.rank = i;
+        return d.child;
       });
     };
-    useSearch = opts => {
-      return useSearch({
-        ...opts,
-        from: this.id
-      });
+    subscribe = (eventType, fn) => {
+      const listener = {
+        eventType,
+        fn
+      };
+      this.subscribers.add(listener);
+      return () => {
+        this.subscribers.delete(listener);
+      };
     };
-    useParams = opts => {
-      return useParams({
-        ...opts,
-        from: this.id
+    emit = routerEvent => {
+      this.subscribers.forEach(listener => {
+        if (listener.eventType === routerEvent.type) {
+          listener.fn(routerEvent);
+        }
       });
     };
-    useLoaderDeps = opts => {
-      return useLoaderDeps({
-        ...opts,
-        from: this.id
-      });
+    checkLatest = promise => {
+      return this.latestLoadPromise !== promise ? this.latestLoadPromise : undefined;
     };
-    useLoaderData = opts => {
-      return useLoaderData({
-        ...opts,
-        from: this.id
-      });
+    parseLocation = previousLocation => {
+      const parse = ({
+        pathname,
+        search,
+        hash,
+        state
+      }) => {
+        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;
     };
-  }
-  function rootRouteWithContext() {
-    return options => {
-      return new RootRoute(options);
+    resolvePathWithBase = (from, path) => {
+      return resolvePath(this.basepath, from, cleanPath(path));
     };
-  }
-  class RootRoute extends Route {
-    constructor(options) {
-      super(options);
+    get looseRoutesById() {
+      return this.routesById;
     }
-  }
-  function createRouteMask(opts) {
-    return opts;
-  }
-
-  //
-
-  class NotFoundRoute extends Route {
-    constructor(options) {
-      super({
-        ...options,
-        id: '404'
+    matchRoutes = (pathname, locationSearch, opts) => {
+      let routeParams = {};
+      let foundRoute = this.flatRoutes.find(route => {
+        const matchedParams = matchPathname(this.basepath, trimPathRight(pathname), {
+          to: route.fullPath,
+          caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive,
+          fuzzy: true
+        });
+        if (matchedParams) {
+          routeParams = matchedParams;
+          return true;
+        }
+        return false;
       });
-    }
-  }
-
-  class FileRoute {
-    constructor(path) {
-      this.path = path;
-    }
-    createRoute = options => {
-      const route = new Route(options);
-      route.isRoot = false;
-      return route;
-    };
-  }
-  function FileRouteLoader(_path) {
-    return loaderFn => loaderFn;
-  }
+      let routeCursor = foundRoute || this.routesById['__root__'];
+      let matchedRoutes = [routeCursor];
 
-  function lazyRouteComponent(importer, exportName) {
-    let loadPromise;
-    const load = () => {
-      if (!loadPromise) {
-        loadPromise = importer();
+      // Check to see if the route needs a 404 entry
+      if (
+      // If we found a route, and it's not an index route and we have left over path
+      (foundRoute ? foundRoute.path !== '/' && routeParams['**'] :
+      // Or if we didn't find a route and we have left over path
+      trimPathRight(pathname)) &&
+      // And we have a 404 route configured
+      this.options.notFoundRoute) {
+        matchedRoutes.push(this.options.notFoundRoute);
+      }
+      while (routeCursor?.parentRoute) {
+        routeCursor = routeCursor.parentRoute;
+        if (routeCursor) matchedRoutes.unshift(routeCursor);
       }
-      return loadPromise;
-    };
-    const lazyComp = /*#__PURE__*/React__namespace.lazy(async () => {
-      const moduleExports = await load();
-      const comp = moduleExports[exportName ?? 'default'];
-      return {
-        default: comp
-      };
-    });
-    lazyComp.preload = load;
-    return lazyComp;
-  }
 
-  function _extends() {
-    _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];
+      // Existing matches are matches that are already loaded along with
+      // pending matches that are still loading
+
+      const parseErrors = matchedRoutes.map(route => {
+        let parsedParamsError;
+        if (route.options.parseParams) {
+          try {
+            const parsedParams = route.options.parseParams(routeParams);
+            // Add the parsed params to the accumulated params bag
+            Object.assign(routeParams, parsedParams);
+          } catch (err) {
+            parsedParamsError = new PathParamError(err.message, {
+              cause: err
+            });
+            if (opts?.throwOnError) {
+              throw parsedParamsError;
+            }
+            return parsedParamsError;
           }
         }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
-  const preloadWarning = 'Error preloading route! ☝️';
-  function useLinkProps(options) {
-    const router = useRouter();
-    const matchPathname = useMatch({
-      strict: false,
-      select: s => s.pathname
-    });
-    const {
-      // custom props
-      children,
-      target,
-      activeProps = () => ({
-        className: 'active'
-      }),
-      inactiveProps = () => ({}),
-      activeOptions,
-      disabled,
-      hash,
-      search,
-      params,
-      to,
-      state,
-      mask,
-      preload: userPreload,
-      preloadDelay: userPreloadDelay,
-      replace,
-      startTransition,
-      resetScroll,
-      // element props
-      style,
-      className,
-      onClick,
-      onFocus,
-      onMouseEnter,
-      onMouseLeave,
-      onTouchStart,
-      ...rest
-    } = options;
-
-    // If this link simply reloads the current route,
-    // make sure it has a new key so it will trigger a data refresh
+        return;
+      });
+      const matches = [];
+      matchedRoutes.forEach((route, index) => {
+        // Take each matched route and resolve + validate its search params
+        // This has to happen serially because each route's search params
+        // can depend on the parent route's search params
+        // It must also happen before we create the match so that we can
+        // pass the search params to the route's potential key function
+        // which is used to uniquely identify the route match in state
 
-    // If this `to` is a valid external URL, return
-    // null for LinkUtils
+        const parentMatch = matches[index - 1];
+        const [preMatchSearch, searchError] = (() => {
+          // Validate the search params and stabilize them
+          const parentSearch = parentMatch?.search ?? locationSearch;
+          try {
+            const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
+            let search = validator?.(parentSearch) ?? {};
+            return [{
+              ...parentSearch,
+              ...search
+            }, undefined];
+          } catch (err) {
+            const searchError = new SearchParamError(err.message, {
+              cause: err
+            });
+            if (opts?.throwOnError) {
+              throw searchError;
+            }
+            return [parentSearch, searchError];
+          }
+        })();
 
-    const dest = {
-      from: options.to ? matchPathname : undefined,
-      ...options
-    };
-    let type = 'internal';
-    try {
-      new URL(`${to}`);
-      type = 'external';
-    } catch {}
-    if (type === 'external') {
-      return {
-        href: to
-      };
-    }
-    const next = router.buildLocation(dest);
-    const preload = userPreload ?? router.options.defaultPreload;
-    const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
-    const isActive = useRouterState({
-      select: s => {
-        // Compare path/hash for matches
-        const currentPathSplit = s.location.pathname.split('/');
-        const nextPathSplit = next.pathname.split('/');
-        const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-        // Combine the matches based on user router.options
-        const pathTest = activeOptions?.exact ? s.location.pathname === next.pathname : pathIsFuzzyEqual;
-        const hashTest = activeOptions?.includeHash ? s.location.hash === next.hash : true;
-        const searchTest = activeOptions?.includeSearch ?? true ? deepEqual(s.location.search, next.search, !activeOptions?.exact) : true;
+        // This is where we need to call route.options.loaderDeps() to get any additional
+        // deps that the route's loader function might need to run. We need to do this
+        // before we create the match so that we can pass the deps to the route's
+        // potential key function which is used to uniquely identify the route match in state
 
-        // The final "active" test
-        return pathTest && hashTest && searchTest;
-      }
-    });
+        const loaderDeps = route.options.loaderDeps?.({
+          search: preMatchSearch
+        }) ?? '';
+        const loaderDepsHash = loaderDeps ? JSON.stringify(loaderDeps) : '';
+        const interpolatedPath = interpolatePath(route.fullPath, routeParams);
+        const matchId = interpolatePath(route.id, routeParams, true) + loaderDepsHash;
 
-    // The click handler
-    const handleClick = e => {
-      if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
-        e.preventDefault();
+        // Waste not, want not. If we already have a match for this route,
+        // reuse it. This is important for layout routes, which might stick
+        // around between navigation actions that only change leaf routes.
+        const existingMatch = getRouteMatch(this.state, matchId);
+        const cause = this.state.matches.find(d => d.id === matchId) ? 'stay' : 'enter';
 
-        // All is well? Navigate!
-        router.commitLocation({
-          ...next,
-          replace,
-          resetScroll,
-          startTransition
-        });
-      }
-    };
+        // Create a fresh route match
+        const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
+        const match = existingMatch ? {
+          ...existingMatch,
+          cause
+        } : {
+          id: matchId,
+          routeId: route.id,
+          params: routeParams,
+          pathname: joinPaths([this.basepath, interpolatedPath]),
+          updatedAt: Date.now(),
+          search: {},
+          searchError: undefined,
+          status: hasLoaders ? 'pending' : 'success',
+          showPending: false,
+          isFetching: false,
+          error: undefined,
+          paramsError: parseErrors[index],
+          loadPromise: Promise.resolve(),
+          routeContext: undefined,
+          context: undefined,
+          abortController: new AbortController(),
+          fetchCount: 0,
+          cause,
+          loaderDeps,
+          invalid: false,
+          preload: false
+        };
 
-    // The click handler
-    const handleFocus = e => {
-      if (preload) {
-        router.preloadRoute(dest).catch(err => {
-          console.warn(err);
-          console.warn(preloadWarning);
-        });
-      }
-    };
-    const handleTouchStart = e => {
-      if (preload) {
-        router.preloadRoute(dest).catch(err => {
-          console.warn(err);
-          console.warn(preloadWarning);
-        });
-      }
-    };
-    const handleEnter = e => {
-      const target = e.target || {};
-      if (preload) {
-        if (target.preloadTimeout) {
-          return;
-        }
-        target.preloadTimeout = setTimeout(() => {
-          target.preloadTimeout = null;
-          router.preloadRoute(dest).catch(err => {
-            console.warn(err);
-            console.warn(preloadWarning);
-          });
-        }, preloadDelay);
-      }
+        // Regardless of whether we're reusing an existing match or creating
+        // a new one, we need to update the match's search params
+        match.search = replaceEqualDeep(match.search, preMatchSearch);
+        // And also update the searchError if there is one
+        match.searchError = searchError;
+        matches.push(match);
+      });
+      return matches;
     };
-    const handleLeave = e => {
-      const target = e.target || {};
-      if (target.preloadTimeout) {
-        clearTimeout(target.preloadTimeout);
-        target.preloadTimeout = null;
-      }
+    cancelMatch = id => {
+      getRouteMatch(this.state, id)?.abortController?.abort();
     };
-    const composeHandlers = handlers => e => {
-      if (e.persist) e.persist();
-      handlers.filter(Boolean).forEach(handler => {
-        if (e.defaultPrevented) return;
-        handler(e);
+    cancelMatches = () => {
+      this.state.pendingMatches?.forEach(match => {
+        this.cancelMatch(match.id);
       });
     };
-
-    // Get the active props
-    const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
-
-    // Get the inactive props
-    const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
-    return {
-      ...resolvedActiveProps,
-      ...resolvedInactiveProps,
-      ...rest,
-      href: disabled ? undefined : next.maskedLocation ? next.maskedLocation.href : next.href,
-      onClick: composeHandlers([onClick, handleClick]),
-      onFocus: composeHandlers([onFocus, handleFocus]),
-      onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
-      onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
-      onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
-      target,
-      style: {
-        ...style,
-        ...resolvedActiveProps.style,
-        ...resolvedInactiveProps.style
-      },
-      className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
-      ...(disabled ? {
-        role: 'link',
-        'aria-disabled': true
-      } : undefined),
-      ['data-status']: isActive ? 'active' : undefined
-    };
-  }
-  const Link = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
-    const linkProps = useLinkProps(props);
-    return /*#__PURE__*/React__namespace.createElement("a", _extends({
-      ref: ref
-    }, linkProps, {
-      children: typeof props.children === 'function' ? props.children({
-        isActive: linkProps['data-status'] === 'active'
-      }) : props.children
-    }));
-  });
-  function isCtrlEvent(e) {
-    return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-  }
-
-  // @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 = '';
-    for (k in obj) {
-      if ((tmp = obj[k]) !== void 0) {
-        if (Array.isArray(tmp)) {
-          for (i = 0; i < tmp.length; i++) {
-            str && (str += '&');
-            str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i]);
-          }
-        } else {
-          str && (str += '&');
-          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp);
+    buildLocation = opts => {
+      const build = (dest = {}, matches) => {
+        const relevantMatches = this.state.pendingMatches || this.state.matches;
+        const fromSearch = relevantMatches[relevantMatches.length - 1]?.search || this.latestLocation.search;
+        let pathname = this.resolvePathWithBase(dest.from ?? this.latestLocation.pathname, `${dest.to ?? ''}`);
+        const fromMatches = this.matchRoutes(this.latestLocation.pathname, fromSearch);
+        const stayingMatches = matches?.filter(d => fromMatches?.find(e => e.routeId === d.routeId));
+        const prevParams = {
+          ...last(fromMatches)?.params
+        };
+        let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+        if (nextParams) {
+          matches?.map(d => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach(fn => {
+            nextParams = {
+              ...nextParams,
+              ...fn(nextParams)
+            };
+          });
         }
-      }
-    }
-    return (pfx || '') + str;
-  }
-  function toValue(mix) {
-    if (!mix) return '';
-    var str = decodeURIComponent(mix);
-    if (str === 'false') return false;
-    if (str === 'true') return true;
-    return +str * 0 === 0 && +str + '' === str ? +str : str;
-  }
-  function decode(str) {
-    var tmp,
-      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;
-  }
-
-  // Detect if we're in the DOM
+        pathname = interpolatePath(pathname, nextParams ?? {});
+        const preSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+        const postSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
 
-  function redirect(opts) {
-    opts.isRedirect = true;
-    if (opts.throw) {
-      throw opts;
-    }
-    return opts;
-  }
-  function isRedirect(obj) {
-    return !!obj?.isRedirect;
-  }
+        // Pre filters first
+        const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), fromSearch) : fromSearch;
 
-  const defaultParseSearch = parseSearchWith(JSON.parse);
-  const defaultStringifySearch = stringifySearchWith(JSON.stringify, JSON.parse);
-  function parseSearchWith(parser) {
-    return searchStr => {
-      if (searchStr.substring(0, 1) === '?') {
-        searchStr = searchStr.substring(1);
-      }
-      let query = decode(searchStr);
+        // 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
+        : {};
 
-      // 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) {
-            //
+        // Then post filters
+        const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+        const search = replaceEqualDeep(fromSearch, postFilteredSearch);
+        const searchStr = this.options.stringifySearch(search);
+        const hash = dest.hash === true ? this.latestLocation.hash : dest.hash ? functionalUpdate(dest.hash, this.latestLocation.hash) : undefined;
+        const hashStr = hash ? `#${hash}` : '';
+        let nextState = dest.state === true ? this.latestLocation.state : dest.state ? functionalUpdate(dest.state, this.latestLocation.state) : this.latestLocation.state;
+        nextState = replaceEqualDeep(this.latestLocation.state, nextState);
+        return {
+          pathname,
+          search,
+          searchStr,
+          state: nextState,
+          hash: hash ?? '',
+          href: `${pathname}${searchStr}${hashStr}`,
+          unmaskOnReload: dest.unmaskOnReload
+        };
+      };
+      const buildWithMatches = (dest = {}, maskedDest) => {
+        let next = build(dest);
+        let maskedNext = maskedDest ? build(maskedDest) : undefined;
+        if (!maskedNext) {
+          let params = {};
+          let foundMask = this.options.routeMasks?.find(d => {
+            const match = matchPathname(this.basepath, next.pathname, {
+              to: d.from,
+              caseSensitive: false,
+              fuzzy: false
+            });
+            if (match) {
+              params = match;
+              return true;
+            }
+            return false;
+          });
+          if (foundMask) {
+            maskedDest = {
+              ...pick(opts, ['from']),
+              ...foundMask,
+              params
+            };
+            maskedNext = build(maskedDest);
           }
         }
-      }
-      return query;
-    };
-  }
-  function stringifySearchWith(stringify, parser) {
-    function stringifyValue(val) {
-      if (typeof val === 'object' && val !== null) {
-        try {
-          return stringify(val);
-        } catch (err) {
-          // silent
-        }
-      } else if (typeof val === 'string' && typeof parser === 'function') {
-        try {
-          // Check if it's a valid parseable string.
-          // If it is, then stringify it again.
-          parser(val);
-          return stringify(val);
-        } catch (err) {
-          // silent
+        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 val;
-    }
-    return search => {
-      search = {
-        ...search
+        return final;
       };
-      if (search) {
-        Object.keys(search).forEach(key => {
-          const val = search[key];
-          if (typeof val === 'undefined' || val === undefined) {
-            delete search[key];
-          } else {
-            search[key] = stringifyValue(val);
-          }
+      if (opts.mask) {
+        return buildWithMatches(opts, {
+          ...pick(opts, ['from']),
+          ...opts.mask
         });
       }
-      const searchStr = encode(search).toString();
-      return searchStr ? `?${searchStr}` : '';
+      return buildWithMatches(opts);
     };
-  }
+    commitLocation = async ({
+      startTransition,
+      ...next
+    }) => {
+      if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
+      const isSameUrl = this.latestLocation.href === next.href;
 
-  const useTransition = React__namespace.useTransition || (() => [false, cb => {
-    cb();
-  }]);
-  function RouterProvider({
-    router,
-    ...rest
-  }) {
-    // Allow the router to update options on the router instance
-    router.update({
-      ...router.options,
-      ...rest,
-      context: {
-        ...router.options.context,
-        ...rest?.context
-      }
-    });
-    const matches = router.options.InnerWrap ? /*#__PURE__*/React__namespace.createElement(router.options.InnerWrap, null, /*#__PURE__*/React__namespace.createElement(Matches, null)) : /*#__PURE__*/React__namespace.createElement(Matches, null);
-    const provider = /*#__PURE__*/React__namespace.createElement(exports.routerContext.Provider, {
-      value: router
-    }, matches, /*#__PURE__*/React__namespace.createElement(Transitioner, null));
-    if (router.options.Wrap) {
-      return /*#__PURE__*/React__namespace.createElement(router.options.Wrap, null, provider);
-    }
-    return provider;
-  }
-  function Transitioner() {
-    const mountLoadCount = React__namespace.useRef(0);
-    const router = useRouter();
-    const routerState = useRouterState({
-      select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
-    });
-    const [isTransitioning, startReactTransition] = useTransition();
-    router.startReactTransition = startReactTransition;
-    React__namespace.useEffect(() => {
-      if (isTransitioning) {
-        router.__store.setState(s => ({
-          ...s,
-          isTransitioning
-        }));
-      }
-    }, [isTransitioning]);
-    const tryLoad = () => {
-      const apply = cb => {
-        if (!routerState.isTransitioning) {
-          startReactTransition(() => cb());
-        } else {
-          cb();
+      // If the next urls are the same and we're not replacing,
+      // do nothing
+      if (!isSameUrl || !next.replace) {
+        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;
+          }
         }
-      };
-      apply(() => {
-        try {
-          router.load();
-        } catch (err) {
-          console.error(err);
+        const apply = () => {
+          this.history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+        };
+        if (startTransition ?? true) {
+          this.startReactTransition(apply);
+        } else {
+          apply();
         }
-      });
+      }
+      this.resetNextScroll = next.resetScroll ?? true;
+      return this.latestLoadPromise;
     };
-    useLayoutEffect$1(() => {
-      const unsub = router.history.subscribe(() => {
-        router.latestLocation = router.parseLocation(router.latestLocation);
-        if (routerState.location !== router.latestLocation) {
-          tryLoad();
-        }
+    buildAndCommitLocation = ({
+      replace,
+      resetScroll,
+      startTransition,
+      ...rest
+    } = {}) => {
+      const location = this.buildLocation(rest);
+      return this.commitLocation({
+        ...location,
+        startTransition,
+        replace,
+        resetScroll
       });
-      const nextLocation = router.buildLocation({
-        search: true,
-        params: true,
-        hash: true,
-        state: true
+    };
+    navigate = ({
+      from,
+      to,
+      ...rest
+    }) => {
+      // 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 = from !== undefined ? String(from) : from
+      let isExternal;
+      try {
+        new URL(`${toString}`);
+        isExternal = true;
+      } catch (e) {}
+      invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
+      return this.buildAndCommitLocation({
+        ...rest,
+        from,
+        to
+        // to: toString,
       });
-      if (routerState.location.href !== nextLocation.href) {
-        router.commitLocation({
-          ...nextLocation,
-          replace: true
-        });
-      }
-      return () => {
-        unsub();
+    };
+    loadMatches = async ({
+      checkLatest,
+      matches,
+      preload
+    }) => {
+      let latestPromise;
+      let firstBadMatchIndex;
+      const updateMatch = match => {
+        // const isPreload = this.state.cachedMatches.find((d) => d.id === match.id)
+        const isPending = this.state.pendingMatches?.find(d => d.id === match.id);
+        const isMatched = this.state.matches.find(d => d.id === match.id);
+        const matchesKey = isPending ? 'pendingMatches' : isMatched ? 'matches' : 'cachedMatches';
+        this.__store.setState(s => ({
+          ...s,
+          [matchesKey]: s[matchesKey]?.map(d => d.id === match.id ? match : d)
+        }));
       };
-    }, [router.history]);
-    useLayoutEffect$1(() => {
-      if (React__namespace.useTransition ? routerState.isTransitioning && !isTransitioning : !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
-        router.emit({
-          type: 'onResolved',
-          fromLocation: routerState.resolvedLocation,
-          toLocation: routerState.location,
-          pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
-        });
-        if (document.querySelector) {
-          if (routerState.location.hash !== '') {
-            const el = document.getElementById(routerState.location.hash);
-            if (el) {
-              el.scrollIntoView();
+
+      // Check each match middleware to see if the route can be accessed
+      try {
+        for (let [index, match] of matches.entries()) {
+          const parentMatch = matches[index - 1];
+          const route = this.looseRoutesById[match.routeId];
+          const abortController = new AbortController();
+          const handleErrorAndRedirect = (err, code) => {
+            err.routerCode = code;
+            firstBadMatchIndex = firstBadMatchIndex ?? index;
+            if (isRedirect(err)) {
+              throw err;
+            }
+            try {
+              route.options.onError?.(err);
+            } catch (errorHandlerErr) {
+              err = errorHandlerErr;
+              if (isRedirect(errorHandlerErr)) {
+                throw errorHandlerErr;
+              }
+            }
+            matches[index] = match = {
+              ...match,
+              error: err,
+              status: 'error',
+              updatedAt: Date.now(),
+              abortController: new AbortController()
+            };
+          };
+          try {
+            if (match.paramsError) {
+              handleErrorAndRedirect(match.paramsError, 'PARSE_PARAMS');
+            }
+            if (match.searchError) {
+              handleErrorAndRedirect(match.searchError, 'VALIDATE_SEARCH');
+            }
+            const parentContext = parentMatch?.context ?? this.options.context ?? {};
+            const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+            const pendingPromise = typeof pendingMs === 'number' && pendingMs <= 0 ? Promise.resolve() : new Promise(r => setTimeout(r, pendingMs));
+            const beforeLoadContext = (await route.options.beforeLoad?.({
+              search: match.search,
+              abortController,
+              params: match.params,
+              preload: !!preload,
+              context: parentContext,
+              location: this.state.location,
+              // TOOD: just expose state and router, etc
+              navigate: opts => this.navigate({
+                ...opts,
+                from: match.pathname
+              }),
+              buildLocation: this.buildLocation,
+              cause: preload ? 'preload' : match.cause
+            })) ?? {};
+            if (isRedirect(beforeLoadContext)) {
+              throw beforeLoadContext;
             }
+            const context = {
+              ...parentContext,
+              ...beforeLoadContext
+            };
+            matches[index] = match = {
+              ...match,
+              routeContext: replaceEqualDeep(match.routeContext, beforeLoadContext),
+              context: replaceEqualDeep(match.context, context),
+              abortController,
+              pendingPromise
+            };
+          } catch (err) {
+            handleErrorAndRedirect(err, 'BEFORE_LOAD');
+            break;
           }
         }
-        router.__store.setState(s => ({
-          ...s,
-          isTransitioning: false,
-          resolvedLocation: s.location
-        }));
-      }
-    }, [routerState.isTransitioning, isTransitioning, routerState.isLoading, routerState.resolvedLocation, routerState.location]);
-    useLayoutEffect$1(() => {
-      if (!window.__TSR_DEHYDRATED__ && !mountLoadCount.current) {
-        mountLoadCount.current++;
-        tryLoad();
+      } catch (err) {
+        if (isRedirect(err)) {
+          if (!preload) this.navigate(err);
+          return matches;
+        }
+        throw err;
       }
-    }, []);
-    return null;
-  }
-  function getRouteMatch(state, id) {
-    return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
-  }
-
-  // import warning from 'tiny-warning'
-
-  //
-
-  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-  class Router {
-    // Option-independent properties
-    tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
-    resetNextScroll = true;
-    navigateTimeout = null;
-    latestLoadPromise = Promise.resolve();
-    subscribers = new Set();
-    injectedHtml = [];
-
-    // Must build in constructor
+      const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
+      const matchPromises = [];
+      validResolvedMatches.forEach((match, index) => {
+        matchPromises.push(new Promise(async resolve => {
+          const parentMatchPromise = matchPromises[index - 1];
+          const route = this.looseRoutesById[match.routeId];
+          const handleErrorAndRedirect = err => {
+            if (isRedirect(err)) {
+              if (!preload) {
+                this.navigate(err);
+              }
+              return true;
+            }
+            return false;
+          };
+          let loadPromise;
+          matches[index] = match = {
+            ...match,
+            showPending: false
+          };
+          let didShowPending = false;
+          const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+          const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
+          const shouldPending = !preload && typeof pendingMs === 'number' && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
+          const loaderContext = {
+            params: match.params,
+            deps: match.loaderDeps,
+            preload: !!preload,
+            parentMatchPromise,
+            abortController: match.abortController,
+            context: match.context,
+            location: this.state.location,
+            navigate: opts => this.navigate({
+              ...opts,
+              from: match.pathname
+            }),
+            cause: preload ? 'preload' : match.cause
+          };
+          const fetch = async () => {
+            if (match.isFetching) {
+              loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
+            } else {
+              // If the user doesn't want the route to reload, just
+              // resolve with the existing loader data
 
-    constructor(options) {
-      this.update({
-        defaultPreloadDelay: 50,
-        defaultPendingMs: 1000,
-        defaultPendingMinMs: 500,
-        context: undefined,
-        ...options,
-        stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
-        parseSearch: options?.parseSearch ?? defaultParseSearch
-      });
-    }
+              if (match.fetchCount && match.status === 'success') {
+                resolve();
+              }
 
-    // These are default implementations that can optionally be overridden
-    // by the router provider once rendered. We provide these so that the
-    // router can be used in a non-react environment if necessary
-    startReactTransition = fn => fn();
-    update = newOptions => {
-      const previousOptions = this.options;
-      this.options = {
-        ...this.options,
-        ...newOptions
-      };
-      if (!this.basepath || newOptions.basepath && newOptions.basepath !== previousOptions.basepath) {
-        if (newOptions.basepath === undefined || newOptions.basepath === '' || newOptions.basepath === '/') {
-          this.basepath = '/';
-        } else {
-          this.basepath = `/${trimPath(newOptions.basepath)}`;
-        }
-      }
-      if (!this.history || this.options.history && this.options.history !== this.history) {
-        this.history = this.options.history ?? (typeof document !== 'undefined' ? createBrowserHistory() : createMemoryHistory({
-          initialEntries: [this.options.basepath || '/']
-        }));
-        this.latestLocation = this.parseLocation();
-      }
-      if (this.options.routeTree !== this.routeTree) {
-        this.routeTree = this.options.routeTree;
-        this.buildRouteTree();
-      }
-      if (!this.__store) {
-        this.__store = new Store(getInitialRouterState(this.latestLocation), {
-          onUpdate: () => {
-            this.__store.state = {
-              ...this.state,
-              status: this.state.isTransitioning || this.state.isLoading ? 'pending' : 'idle'
+              // Otherwise, load the route
+              matches[index] = match = {
+                ...match,
+                isFetching: true,
+                fetchCount: match.fetchCount + 1
+              };
+              const componentsPromise = Promise.all(componentTypes.map(async type => {
+                const component = route.options[type];
+                if (component?.preload) {
+                  await component.preload();
+                }
+              }));
+              const loaderPromise = route.options.loader?.(loaderContext);
+              loadPromise = Promise.all([componentsPromise, loaderPromise]).then(d => d[1]);
+            }
+            matches[index] = match = {
+              ...match,
+              loadPromise
             };
-          }
-        });
-      }
-    };
-    get state() {
-      return this.__store.state;
-    }
-    buildRouteTree = () => {
-      this.routesById = {};
-      this.routesByPath = {};
-      const notFoundRoute = this.options.notFoundRoute;
-      if (notFoundRoute) {
-        notFoundRoute.init({
-          originalIndex: 99999999999
-        });
-        this.routesById[notFoundRoute.id] = notFoundRoute;
-      }
-      const recurseRoutes = childRoutes => {
-        childRoutes.forEach((childRoute, i) => {
-          childRoute.init({
-            originalIndex: i
-          });
-          const existingRoute = this.routesById[childRoute.id];
-          invariant(!existingRoute, `Duplicate routes found with id: ${String(childRoute.id)}`);
-          this.routesById[childRoute.id] = childRoute;
-          if (!childRoute.isRoot && childRoute.path) {
-            const trimmedFullPath = trimPathRight(childRoute.fullPath);
-            if (!this.routesByPath[trimmedFullPath] || childRoute.fullPath.endsWith('/')) {
-              this.routesByPath[trimmedFullPath] = childRoute;
+            updateMatch(match);
+            try {
+              const loaderData = await loadPromise;
+              if (latestPromise = checkLatest()) return await latestPromise;
+              if (isRedirect(loaderData)) {
+                if (handleErrorAndRedirect(loaderData)) return;
+              }
+              if (didShowPending && pendingMinMs) {
+                await new Promise(r => setTimeout(r, pendingMinMs));
+              }
+              if (latestPromise = checkLatest()) return await latestPromise;
+              matches[index] = match = {
+                ...match,
+                error: undefined,
+                status: 'success',
+                isFetching: false,
+                updatedAt: Date.now(),
+                loaderData,
+                loadPromise: undefined
+              };
+            } catch (error) {
+              if (latestPromise = checkLatest()) return await latestPromise;
+              if (handleErrorAndRedirect(error)) return;
+              try {
+                route.options.onError?.(error);
+              } catch (onErrorError) {
+                error = onErrorError;
+                if (handleErrorAndRedirect(onErrorError)) return;
+              }
+              matches[index] = match = {
+                ...match,
+                error,
+                status: 'error',
+                isFetching: false
+              };
             }
-          }
-          const children = childRoute.children;
-          if (children?.length) {
-            recurseRoutes(children);
-          }
-        });
-      };
-      recurseRoutes([this.routeTree]);
-      const scoredRoutes = [];
-      Object.values(this.routesById).forEach((d, i) => {
-        if (d.isRoot || !d.path) {
-          return;
-        }
-        const trimmed = trimPathLeft(d.fullPath);
-        const parsed = parsePathname(trimmed);
-        while (parsed.length > 1 && parsed[0]?.value === '/') {
-          parsed.shift();
-        }
-        const scores = parsed.map(d => {
-          if (d.value === '/') {
-            return 0.75;
-          }
-          if (d.type === 'param') {
-            return 0.5;
-          }
-          if (d.type === 'wildcard') {
-            return 0.25;
-          }
-          return 1;
-        });
-        scoredRoutes.push({
-          child: d,
-          trimmed,
-          parsed,
-          index: i,
-          scores
-        });
-      });
-      this.flatRoutes = scoredRoutes.sort((a, b) => {
-        const minLength = Math.min(a.scores.length, b.scores.length);
-
-        // Sort by min available score
-        for (let i = 0; i < minLength; i++) {
-          if (a.scores[i] !== b.scores[i]) {
-            return b.scores[i] - a.scores[i];
-          }
-        }
+            updateMatch(match);
+          };
 
-        // Sort by length of score
-        if (a.scores.length !== b.scores.length) {
-          return b.scores.length - a.scores.length;
-        }
+          // This is where all of the stale-while-revalidate magic happens
+          const age = Date.now() - match.updatedAt;
+          let staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 30_000 // 30 seconds for preloads by default
+          : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
 
-        // Sort by min available parsed value
-        for (let i = 0; i < minLength; i++) {
-          if (a.parsed[i].value !== b.parsed[i].value) {
-            return a.parsed[i].value > b.parsed[i].value ? 1 : -1;
-          }
-        }
+          // Default to reloading the route all the time
+          let shouldReload;
+          const shouldReloadOption = route.options.shouldReload;
 
-        // Sort by original index
-        return a.index - b.index;
-      }).map((d, i) => {
-        d.child.rank = i;
-        return d.child;
-      });
-    };
-    subscribe = (eventType, fn) => {
-      const listener = {
-        eventType,
-        fn
-      };
-      this.subscribers.add(listener);
-      return () => {
-        this.subscribers.delete(listener);
-      };
-    };
-    emit = routerEvent => {
-      this.subscribers.forEach(listener => {
-        if (listener.eventType === routerEvent.type) {
-          listener.fn(routerEvent);
-        }
+          // Allow shouldReload to get the last say,
+          // if provided.
+          shouldReload = typeof shouldReloadOption === 'function' ? shouldReloadOption(loaderContext) : shouldReloadOption;
+          matches[index] = match = {
+            ...match,
+            preload: !!preload && !this.state.matches.find(d => d.id === match.id)
+          };
+          if (match.status !== 'success') {
+            // If we need to potentially show the pending component,
+            // start a timer to show it after the pendingMs
+            if (shouldPending) {
+              match.pendingPromise?.then(async () => {
+                if (latestPromise = checkLatest()) return latestPromise;
+                didShowPending = true;
+                matches[index] = match = {
+                  ...match,
+                  showPending: true
+                };
+                updateMatch(match);
+                resolve();
+              });
+            }
+
+            // Critical Fetching, we need to await
+            await fetch();
+          } else if (match.invalid || (shouldReload ?? age > staleAge)) {
+            // Background Fetching, no need to wait
+            fetch();
+          }
+          resolve();
+        }));
       });
+      await Promise.all(matchPromises);
+      return matches;
     };
-    checkLatest = promise => {
-      return this.latestLoadPromise !== promise ? this.latestLoadPromise : undefined;
-    };
-    parseLocation = previousLocation => {
-      const parse = ({
-        pathname,
-        search,
-        hash,
-        state
-      }) => {
-        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;
-    };
-    resolvePathWithBase = (from, path) => {
-      return resolvePath(this.basepath, from, cleanPath(path));
-    };
-    get looseRoutesById() {
-      return this.routesById;
-    }
-    matchRoutes = (pathname, locationSearch, opts) => {
-      let routeParams = {};
-      let foundRoute = this.flatRoutes.find(route => {
-        const matchedParams = matchPathname(this.basepath, trimPathRight(pathname), {
-          to: route.fullPath,
-          caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive,
-          fuzzy: true
-        });
-        if (matchedParams) {
-          routeParams = matchedParams;
-          return true;
-        }
-        return false;
+    invalidate = () => {
+      const invalidate = d => ({
+        ...d,
+        invalid: true
       });
-      let routeCursor = foundRoute || this.routesById['__root__'];
-      let matchedRoutes = [routeCursor];
+      this.__store.setState(s => ({
+        ...s,
+        matches: s.matches.map(invalidate),
+        cachedMatches: s.cachedMatches.map(invalidate),
+        pendingMatches: s.pendingMatches?.map(invalidate)
+      }));
+      this.load();
+    };
+    load = async () => {
+      const promise = new Promise(async (resolve, reject) => {
+        const next = this.latestLocation;
+        const prevLocation = this.state.resolvedLocation;
+        const pathDidChange = prevLocation.href !== next.href;
+        let latestPromise;
 
-      // Check to see if the route needs a 404 entry
-      if (
-      // If we found a route, and it's not an index route and we have left over path
-      (foundRoute ? foundRoute.path !== '/' && routeParams['**'] :
-      // Or if we didn't find a route and we have left over path
-      trimPathRight(pathname)) &&
-      // And we have a 404 route configured
-      this.options.notFoundRoute) {
-        matchedRoutes.push(this.options.notFoundRoute);
-      }
-      while (routeCursor?.parentRoute) {
-        routeCursor = routeCursor.parentRoute;
-        if (routeCursor) matchedRoutes.unshift(routeCursor);
-      }
+        // Cancel any pending matches
+        this.cancelMatches();
+        this.emit({
+          type: 'onBeforeLoad',
+          fromLocation: prevLocation,
+          toLocation: next,
+          pathChanged: pathDidChange
+        });
+        let pendingMatches;
+        const previousMatches = this.state.matches;
+        this.__store.batch(() => {
+          this.cleanCache();
 
-      // Existing matches are matches that are already loaded along with
-      // pending matches that are still loading
+          // Match the routes
+          pendingMatches = this.matchRoutes(next.pathname, next.search, {
+            debug: true
+          });
 
-      const parseErrors = matchedRoutes.map(route => {
-        let parsedParamsError;
-        if (route.options.parseParams) {
+          // Ingest the new matches
+          // If a cached moved to pendingMatches, remove it from cachedMatches
+          this.__store.setState(s => ({
+            ...s,
+            isLoading: true,
+            location: next,
+            pendingMatches,
+            cachedMatches: s.cachedMatches.filter(d => {
+              return !pendingMatches.find(e => e.id === d.id);
+            })
+          }));
+        });
+        try {
           try {
-            const parsedParams = route.options.parseParams(routeParams);
-            // Add the parsed params to the accumulated params bag
-            Object.assign(routeParams, parsedParams);
-          } catch (err) {
-            parsedParamsError = new PathParamError(err.message, {
-              cause: err
+            // Load the matches
+            await this.loadMatches({
+              matches: pendingMatches,
+              checkLatest: () => this.checkLatest(promise)
             });
-            if (opts?.throwOnError) {
-              throw parsedParamsError;
-            }
-            return parsedParamsError;
-          }
-        }
-        return;
-      });
-      const matches = [];
-      matchedRoutes.forEach((route, index) => {
-        // Take each matched route and resolve + validate its search params
-        // This has to happen serially because each route's search params
-        // can depend on the parent route's search params
-        // It must also happen before we create the match so that we can
-        // pass the search params to the route's potential key function
-        // which is used to uniquely identify the route match in state
-
-        const parentMatch = matches[index - 1];
-        const [preMatchSearch, searchError] = (() => {
-          // Validate the search params and stabilize them
-          const parentSearch = parentMatch?.search ?? locationSearch;
-          try {
-            const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
-            let search = validator?.(parentSearch) ?? {};
-            return [{
-              ...parentSearch,
-              ...search
-            }, undefined];
           } catch (err) {
-            const searchError = new SearchParamError(err.message, {
-              cause: err
-            });
-            if (opts?.throwOnError) {
-              throw searchError;
-            }
-            return [parentSearch, searchError];
+            // swallow this error, since we'll display the
+            // errors on the route components
           }
-        })();
-
-        // This is where we need to call route.options.loaderDeps() to get any additional
-        // deps that the route's loader function might need to run. We need to do this
-        // before we create the match so that we can pass the deps to the route's
-        // potential key function which is used to uniquely identify the route match in state
 
-        const loaderDeps = route.options.loaderDeps?.({
-          search: preMatchSearch
-        }) ?? '';
-        const loaderDepsHash = loaderDeps ? JSON.stringify(loaderDeps) : '';
-        const interpolatedPath = interpolatePath(route.fullPath, routeParams);
-        const matchId = interpolatePath(route.id, routeParams, true) + loaderDepsHash;
+          // Only apply the latest transition
+          if (latestPromise = this.checkLatest(promise)) {
+            return latestPromise;
+          }
+          const exitingMatches = previousMatches.filter(match => !pendingMatches.find(d => d.id === match.id));
+          const enteringMatches = pendingMatches.filter(match => !previousMatches.find(d => d.id === match.id));
+          const stayingMatches = previousMatches.filter(match => pendingMatches.find(d => d.id === match.id));
 
-        // Waste not, want not. If we already have a match for this route,
-        // reuse it. This is important for layout routes, which might stick
-        // around between navigation actions that only change leaf routes.
-        const existingMatch = getRouteMatch(this.state, matchId);
-        const cause = this.state.matches.find(d => d.id === matchId) ? 'stay' : 'enter';
+          // Commit the pending matches. If a previous match was
+          // removed, place it in the cachedMatches
+          this.__store.batch(() => {
+            this.__store.setState(s => ({
+              ...s,
+              isLoading: false,
+              matches: s.pendingMatches,
+              pendingMatches: undefined,
+              cachedMatches: [...s.cachedMatches, ...exitingMatches.filter(d => d.status !== 'error')]
+            }));
+            this.cleanCache();
+          })
 
-        // Create a fresh route match
-        const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
-        const match = existingMatch ? {
-          ...existingMatch,
-          cause
-        } : {
-          id: matchId,
-          routeId: route.id,
-          params: routeParams,
-          pathname: joinPaths([this.basepath, interpolatedPath]),
-          updatedAt: Date.now(),
-          search: {},
-          searchError: undefined,
-          status: hasLoaders ? 'pending' : 'success',
-          showPending: false,
-          isFetching: false,
-          error: undefined,
-          paramsError: parseErrors[index],
-          loadPromise: Promise.resolve(),
-          routeContext: undefined,
-          context: undefined,
-          abortController: new AbortController(),
-          fetchCount: 0,
-          cause,
-          loaderDeps,
-          invalid: false,
-          preload: false
-        };
-
-        // Regardless of whether we're reusing an existing match or creating
-        // a new one, we need to update the match's search params
-        match.search = replaceEqualDeep(match.search, preMatchSearch);
-        // And also update the searchError if there is one
-        match.searchError = searchError;
-        matches.push(match);
-      });
-      return matches;
-    };
-    cancelMatch = id => {
-      getRouteMatch(this.state, id)?.abortController?.abort();
-    };
-    cancelMatches = () => {
-      this.state.pendingMatches?.forEach(match => {
-        this.cancelMatch(match.id);
-      });
-    };
-    buildLocation = opts => {
-      const build = (dest = {}, matches) => {
-        const relevantMatches = this.state.pendingMatches || this.state.matches;
-        const fromSearch = relevantMatches[relevantMatches.length - 1]?.search || this.latestLocation.search;
-        let pathname = this.resolvePathWithBase(dest.from ?? this.latestLocation.pathname, `${dest.to ?? ''}`);
-        const fromMatches = this.matchRoutes(this.latestLocation.pathname, fromSearch);
-        const stayingMatches = matches?.filter(d => fromMatches?.find(e => e.routeId === d.routeId));
-        const prevParams = {
-          ...last(fromMatches)?.params
-        };
-        let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
-        if (nextParams) {
-          matches?.map(d => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach(fn => {
-            nextParams = {
-              ...nextParams,
-              ...fn(nextParams)
-            };
-          });
-        }
-        pathname = interpolatePath(pathname, nextParams ?? {});
-        const preSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
-        const postSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
-
-        // Pre filters first
-        const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), fromSearch) : fromSearch;
-
-        // 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(fromSearch, postFilteredSearch);
-        const searchStr = this.options.stringifySearch(search);
-        const hash = dest.hash === true ? this.latestLocation.hash : dest.hash ? functionalUpdate(dest.hash, this.latestLocation.hash) : undefined;
-        const hashStr = hash ? `#${hash}` : '';
-        let nextState = dest.state === true ? this.latestLocation.state : dest.state ? functionalUpdate(dest.state, this.latestLocation.state) : this.latestLocation.state;
-        nextState = replaceEqualDeep(this.latestLocation.state, nextState);
-        return {
-          pathname,
-          search,
-          searchStr,
-          state: nextState,
-          hash: hash ?? '',
-          href: `${pathname}${searchStr}${hashStr}`,
-          unmaskOnReload: dest.unmaskOnReload
-        };
-      };
-      const buildWithMatches = (dest = {}, maskedDest) => {
-        let next = build(dest);
-        let maskedNext = maskedDest ? build(maskedDest) : undefined;
-        if (!maskedNext) {
-          let params = {};
-          let foundMask = this.options.routeMasks?.find(d => {
-            const match = matchPathname(this.basepath, next.pathname, {
-              to: d.from,
-              caseSensitive: false,
-              fuzzy: false
+          //
+          ;
+          [[exitingMatches, 'onLeave'], [enteringMatches, 'onEnter'], [stayingMatches, 'onStay']].forEach(([matches, hook]) => {
+            matches.forEach(match => {
+              this.looseRoutesById[match.routeId].options[hook]?.(match);
             });
-            if (match) {
-              params = match;
-              return true;
-            }
-            return false;
           });
-          if (foundMask) {
-            maskedDest = {
-              ...pick(opts, ['from']),
-              ...foundMask,
-              params
-            };
-            maskedNext = build(maskedDest);
+          this.emit({
+            type: 'onLoad',
+            fromLocation: prevLocation,
+            toLocation: next,
+            pathChanged: pathDidChange
+          });
+          resolve();
+        } catch (err) {
+          // Only apply the latest transition
+          if (latestPromise = this.checkLatest(promise)) {
+            return latestPromise;
           }
+          reject(err);
         }
-        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
-        });
-      }
-      return buildWithMatches(opts);
+      });
+      this.latestLoadPromise = promise;
+      return this.latestLoadPromise;
     };
-    commitLocation = async ({
-      startTransition,
-      ...next
-    }) => {
-      if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
-      const isSameUrl = this.latestLocation.href === next.href;
-
-      // If the next urls are the same and we're not replacing,
-      // do nothing
-      if (!isSameUrl || !next.replace) {
-        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
-                }
-              }
+    cleanCache = () => {
+      // This is where all of the garbage collection magic happens
+      this.__store.setState(s => {
+        return {
+          ...s,
+          cachedMatches: s.cachedMatches.filter(d => {
+            const route = this.looseRoutesById[d.routeId];
+            if (!route.options.loader) {
+              return false;
             }
-          };
-          if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
-            nextHistory.state.__tempKey = this.tempLocationKey;
-          }
-        }
-        const apply = () => {
-          this.history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+
+            // If the route was preloaded, use the preloadGcTime
+            // otherwise, use the gcTime
+            const gcTime = (d.preload ? route.options.preloadGcTime ?? this.options.defaultPreloadGcTime : route.options.gcTime ?? this.options.defaultGcTime) ?? 5 * 60 * 1000;
+            return d.status !== 'error' && Date.now() - d.updatedAt < gcTime;
+          })
         };
-        if (startTransition ?? true) {
-          this.startReactTransition(apply);
-        } else {
-          apply();
-        }
-      }
-      this.resetNextScroll = next.resetScroll ?? true;
-      return this.latestLoadPromise;
-    };
-    buildAndCommitLocation = ({
-      replace,
-      resetScroll,
-      startTransition,
-      ...rest
-    } = {}) => {
-      const location = this.buildLocation(rest);
-      return this.commitLocation({
-        ...location,
-        startTransition,
-        replace,
-        resetScroll
       });
     };
-    navigate = ({
-      from,
-      to,
-      ...rest
-    }) => {
-      // 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 = from !== undefined ? String(from) : from
-      let isExternal;
-      try {
-        new URL(`${toString}`);
-        isExternal = true;
-      } catch (e) {}
-      invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
-      return this.buildAndCommitLocation({
-        ...rest,
-        from,
-        to
-        // to: toString,
+    preloadRoute = async (navigateOpts = this.state.location) => {
+      let next = this.buildLocation(navigateOpts);
+      let matches = this.matchRoutes(next.pathname, next.search, {
+        throwOnError: true
       });
-    };
-    loadMatches = async ({
-      checkLatest,
-      matches,
-      preload
-    }) => {
-      let latestPromise;
-      let firstBadMatchIndex;
-      const updateMatch = match => {
-        // const isPreload = this.state.cachedMatches.find((d) => d.id === match.id)
-        const isPending = this.state.pendingMatches?.find(d => d.id === match.id);
-        const isMatched = this.state.matches.find(d => d.id === match.id);
-        const matchesKey = isPending ? 'pendingMatches' : isMatched ? 'matches' : 'cachedMatches';
-        this.__store.setState(s => ({
-          ...s,
-          [matchesKey]: s[matchesKey]?.map(d => d.id === match.id ? match : d)
-        }));
-      };
-
-      // Check each match middleware to see if the route can be accessed
-      try {
-        for (let [index, match] of matches.entries()) {
-          const parentMatch = matches[index - 1];
-          const route = this.looseRoutesById[match.routeId];
-          const abortController = new AbortController();
-          const handleErrorAndRedirect = (err, code) => {
-            err.routerCode = code;
-            firstBadMatchIndex = firstBadMatchIndex ?? index;
-            if (isRedirect(err)) {
-              throw err;
-            }
-            try {
-              route.options.onError?.(err);
-            } catch (errorHandlerErr) {
-              err = errorHandlerErr;
-              if (isRedirect(errorHandlerErr)) {
-                throw errorHandlerErr;
-              }
-            }
-            matches[index] = match = {
-              ...match,
-              error: err,
-              status: 'error',
-              updatedAt: Date.now(),
-              abortController: new AbortController()
-            };
-          };
-          try {
-            if (match.paramsError) {
-              handleErrorAndRedirect(match.paramsError, 'PARSE_PARAMS');
-            }
-            if (match.searchError) {
-              handleErrorAndRedirect(match.searchError, 'VALIDATE_SEARCH');
-            }
-            const parentContext = parentMatch?.context ?? this.options.context ?? {};
-            const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-            const pendingPromise = typeof pendingMs === 'number' && pendingMs <= 0 ? Promise.resolve() : new Promise(r => setTimeout(r, pendingMs));
-            const beforeLoadContext = (await route.options.beforeLoad?.({
-              search: match.search,
-              abortController,
-              params: match.params,
-              preload: !!preload,
-              context: parentContext,
-              location: this.state.location,
-              // TOOD: just expose state and router, etc
-              navigate: opts => this.navigate({
-                ...opts,
-                from: match.pathname
-              }),
-              buildLocation: this.buildLocation,
-              cause: preload ? 'preload' : match.cause
-            })) ?? {};
-            if (isRedirect(beforeLoadContext)) {
-              throw beforeLoadContext;
-            }
-            const context = {
-              ...parentContext,
-              ...beforeLoadContext
-            };
-            matches[index] = match = {
-              ...match,
-              routeContext: replaceEqualDeep(match.routeContext, beforeLoadContext),
-              context: replaceEqualDeep(match.context, context),
-              abortController,
-              pendingPromise
-            };
-          } catch (err) {
-            handleErrorAndRedirect(err, 'BEFORE_LOAD');
-            break;
+      const loadedMatchIds = Object.fromEntries([...this.state.matches, ...(this.state.pendingMatches ?? []), ...this.state.cachedMatches]?.map(d => [d.id, true]));
+      this.__store.batch(() => {
+        matches.forEach(match => {
+          if (!loadedMatchIds[match.id]) {
+            this.__store.setState(s => ({
+              ...s,
+              cachedMatches: [...s.cachedMatches, match]
+            }));
           }
+        });
+      });
+      matches = await this.loadMatches({
+        matches,
+        preload: true,
+        checkLatest: () => undefined
+      });
+      return matches;
+    };
+    matchRoute = (location, opts) => {
+      location = {
+        ...location,
+        to: location.to ? this.resolvePathWithBase(location.from || '', location.to) : undefined
+      };
+      const next = this.buildLocation(location);
+      if (opts?.pending && this.state.status !== 'pending') {
+        return false;
+      }
+      const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
+      if (!baseLocation) {
+        return false;
+      }
+      const match = matchPathname(this.basepath, baseLocation.pathname, {
+        ...opts,
+        to: next.pathname
+      });
+      if (!match) {
+        return false;
+      }
+      if (match && (opts?.includeSearch ?? true)) {
+        return deepEqual(baseLocation.search, next.search, true) ? match : false;
+      }
+      return match;
+    };
+    injectHtml = async html => {
+      this.injectedHtml.push(html);
+    };
+    dehydrateData = (key, getData) => {
+      if (typeof document === 'undefined') {
+        const strKey = typeof key === 'string' ? key : JSON.stringify(key);
+        this.injectHtml(async () => {
+          const id = `__TSR_DEHYDRATED__${strKey}`;
+          const data = typeof getData === 'function' ? await getData() : getData;
+          return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(strKey)}"] = ${JSON.stringify(data)}
+          ;(() => {
+            var el = document.getElementById('${id}')
+            el.parentElement.removeChild(el)
+          })()
+          </script>`;
+        });
+        return () => this.hydrateData(key);
+      }
+      return () => undefined;
+    };
+    hydrateData = key => {
+      if (typeof document !== 'undefined') {
+        const strKey = typeof key === 'string' ? key : JSON.stringify(key);
+        return window[`__TSR_DEHYDRATED__${strKey}`];
+      }
+      return undefined;
+    };
+    dehydrate = () => {
+      const pickError = this.options.errorSerializer?.serialize ?? defaultSerializeError;
+      return {
+        state: {
+          dehydratedMatches: this.state.matches.map(d => ({
+            ...pick(d, ['id', 'status', 'updatedAt', 'loaderData']),
+            // If an error occurs server-side during SSRing,
+            // send a small subset of the error to the client
+            error: d.error ? {
+              data: pickError(d.error),
+              __isServerError: true
+            } : undefined
+          }))
         }
-      } catch (err) {
-        if (isRedirect(err)) {
-          if (!preload) this.navigate(err);
-          return matches;
-        }
-        throw err;
+      };
+    };
+    hydrate = async __do_not_use_server_ctx => {
+      let _ctx = __do_not_use_server_ctx;
+      // Client hydrates from window
+      if (typeof document !== 'undefined') {
+        _ctx = window.__TSR_DEHYDRATED__;
       }
-      const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
-      const matchPromises = [];
-      validResolvedMatches.forEach((match, index) => {
-        matchPromises.push(new Promise(async resolve => {
-          const parentMatchPromise = matchPromises[index - 1];
-          const route = this.looseRoutesById[match.routeId];
-          const handleErrorAndRedirect = err => {
-            if (isRedirect(err)) {
-              if (!preload) {
-                this.navigate(err);
-              }
-              return true;
-            }
-            return false;
-          };
-          let loadPromise;
-          matches[index] = match = {
+      invariant(_ctx, 'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?');
+      const ctx = _ctx;
+      this.dehydratedData = ctx.payload;
+      this.options.hydrate?.(ctx.payload);
+      const dehydratedState = ctx.router.state;
+      let matches = this.matchRoutes(this.state.location.pathname, this.state.location.search).map(match => {
+        const dehydratedMatch = dehydratedState.dehydratedMatches.find(d => d.id === match.id);
+        invariant(dehydratedMatch, `Could not find a client-side match for dehydrated match with id: ${match.id}!`);
+        if (dehydratedMatch) {
+          return {
             ...match,
-            showPending: false
-          };
-          let didShowPending = false;
-          const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-          const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
-          const shouldPending = !preload && typeof pendingMs === 'number' && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
-          const loaderContext = {
-            params: match.params,
-            deps: match.loaderDeps,
-            preload: !!preload,
-            parentMatchPromise,
-            abortController: match.abortController,
-            context: match.context,
-            location: this.state.location,
-            navigate: opts => this.navigate({
-              ...opts,
-              from: match.pathname
-            }),
-            cause: preload ? 'preload' : match.cause
+            ...dehydratedMatch
           };
-          const fetch = async () => {
-            if (match.isFetching) {
-              loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
-            } else {
-              // If the user doesn't want the route to reload, just
-              // resolve with the existing loader data
+        }
+        return match;
+      });
+      this.__store.setState(s => {
+        return {
+          ...s,
+          matches: matches
+        };
+      });
+    };
 
-              if (match.fetchCount && match.status === 'success') {
-                resolve();
-              }
+    // resolveMatchPromise = (matchId: string, key: string, value: any) => {
+    //   state.matches
+    //     .find((d) => d.id === matchId)
+    //     ?.__promisesByKey[key]?.resolve(value)
+    // }
+  }
 
-              // Otherwise, load the route
-              matches[index] = match = {
-                ...match,
-                isFetching: true,
-                fetchCount: match.fetchCount + 1
-              };
-              const componentsPromise = Promise.all(componentTypes.map(async type => {
-                const component = route.options[type];
-                if (component?.preload) {
-                  await component.preload();
-                }
-              }));
-              const loaderPromise = route.options.loader?.(loaderContext);
-              loadPromise = Promise.all([componentsPromise, loaderPromise]).then(d => d[1]);
-            }
-            matches[index] = match = {
-              ...match,
-              loadPromise
-            };
-            updateMatch(match);
-            try {
-              const loaderData = await loadPromise;
-              if (latestPromise = checkLatest()) return await latestPromise;
-              if (isRedirect(loaderData)) {
-                if (handleErrorAndRedirect(loaderData)) return;
-              }
-              if (didShowPending && pendingMinMs) {
-                await new Promise(r => setTimeout(r, pendingMinMs));
-              }
-              if (latestPromise = checkLatest()) return await latestPromise;
-              matches[index] = match = {
-                ...match,
-                error: undefined,
-                status: 'success',
-                isFetching: false,
-                updatedAt: Date.now(),
-                loaderData,
-                loadPromise: undefined
-              };
-            } catch (error) {
-              if (latestPromise = checkLatest()) return await latestPromise;
-              if (handleErrorAndRedirect(error)) return;
-              try {
-                route.options.onError?.(error);
-              } catch (onErrorError) {
-                error = onErrorError;
-                if (handleErrorAndRedirect(onErrorError)) return;
-              }
-              matches[index] = match = {
-                ...match,
-                error,
-                status: 'error',
-                isFetching: false
-              };
-            }
-            updateMatch(match);
-          };
+  // A function that takes an import() argument which is a function and returns a new function that will
+  // proxy arguments from the caller to the imported function, retaining all type
+  // information along the way
+  function lazyFn(fn, key) {
+    return async (...args) => {
+      const imported = await fn();
+      return imported[key || 'default'](...args);
+    };
+  }
+  class SearchParamError extends Error {}
+  class PathParamError extends Error {}
+  function getInitialRouterState(location) {
+    return {
+      isLoading: false,
+      isTransitioning: false,
+      status: 'idle',
+      resolvedLocation: {
+        ...location
+      },
+      location,
+      matches: [],
+      pendingMatches: [],
+      cachedMatches: [],
+      lastUpdated: Date.now()
+    };
+  }
+  function defaultSerializeError(err) {
+    if (err instanceof Error) return {
+      name: err.name,
+      message: err.message
+    };
+    return {
+      data: err
+    };
+  }
 
-          // This is where all of the stale-while-revalidate magic happens
-          const age = Date.now() - match.updatedAt;
-          let staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 30_000 // 30 seconds for preloads by default
-          : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
+  function defer(_promise, options) {
+    const promise = _promise;
+    if (!promise.__deferredState) {
+      promise.__deferredState = {
+        uid: Math.random().toString(36).slice(2),
+        status: 'pending'
+      };
+      const state = promise.__deferredState;
+      promise.then(data => {
+        state.status = 'success';
+        state.data = data;
+      }).catch(error => {
+        state.status = 'error';
+        state.error = {
+          data: (options?.serializeError ?? defaultSerializeError)(error),
+          __isServerError: true
+        };
+      });
+    }
+    return promise;
+  }
+  function isDehydratedDeferred(obj) {
+    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+  }
 
-          // Default to reloading the route all the time
-          let shouldReload;
-          const shouldReloadOption = route.options.shouldReload;
+  function useAwaited({
+    promise
+  }) {
+    const router = useRouter();
+    let state = promise.__deferredState;
+    const key = `__TSR__DEFERRED__${state.uid}`;
+    if (isDehydratedDeferred(promise)) {
+      state = router.hydrateData(key);
+      if (!state) throw new Error('Could not find dehydrated data');
+      promise = Promise.resolve(state.data);
+      promise.__deferredState = state;
+    }
+    if (state.status === 'pending') {
+      throw promise;
+    }
+    if (state.status === 'error') {
+      if (typeof document !== 'undefined') {
+        if (isServerSideError(state.error)) {
+          throw (router.options.errorSerializer?.deserialize ?? defaultDeserializeError)(state.error.data);
+        } else {
+          warning(false, "Encountered a server-side error that doesn't fit the expected shape");
+          throw state.error;
+        }
+      } else {
+        router.dehydrateData(key, state);
+        throw {
+          data: (router.options.errorSerializer?.serialize ?? defaultSerializeError)(state.error),
+          __isServerError: true
+        };
+      }
+    }
+    router.dehydrateData(key, state);
+    return [state.data];
+  }
+  function Await(props) {
+    const awaited = useAwaited(props);
+    return props.children(...awaited);
+  }
 
-          // Allow shouldReload to get the last say,
-          // if provided.
-          shouldReload = typeof shouldReloadOption === 'function' ? shouldReloadOption(loaderContext) : shouldReloadOption;
-          matches[index] = match = {
-            ...match,
-            preload: !!preload && !this.state.matches.find(d => d.id === match.id)
-          };
-          if (match.status !== 'success') {
-            // If we need to potentially show the pending component,
-            // start a timer to show it after the pendingMs
-            if (shouldPending) {
-              match.pendingPromise?.then(async () => {
-                if (latestPromise = checkLatest()) return latestPromise;
-                didShowPending = true;
-                matches[index] = match = {
-                  ...match,
-                  showPending: true
-                };
-                updateMatch(match);
-                resolve();
-              });
-            }
+  function useParams(opts) {
+    return useRouterState({
+      select: state => {
+        const params = last(getRenderedMatches(state))?.params;
+        return opts?.select ? opts.select(params) : params;
+      }
+    });
+  }
 
-            // Critical Fetching, we need to await
-            await fetch();
-          } else if (match.invalid || (shouldReload ?? age > staleAge)) {
-            // Background Fetching, no need to wait
-            fetch();
-          }
-          resolve();
-        }));
+  function useSearch(opts) {
+    return useMatch({
+      ...opts,
+      select: match => {
+        return opts?.select ? opts.select(match.search) : match.search;
+      }
+    });
+  }
+
+  const rootRouteId = '__root__';
+
+  // The parse type here allows a zod schema to be passed directly to the validator
+
+  // TODO: This is part of a future APi to move away from classes and
+  // towards a more functional API. It's not ready yet.
+
+  // type RouteApiInstance<
+  //   TId extends RouteIds<RegisteredRouter['routeTree']>,
+  //   TRoute extends AnyRoute = RouteById<RegisteredRouter['routeTree'], TId>,
+  //   TFullSearchSchema extends Record<
+  //     string,
+  //     any
+  //   > = TRoute['types']['fullSearchSchema'],
+  //   TAllParams extends AnyPathParams = TRoute['types']['allParams'],
+  //   TAllContext extends Record<string, any> = TRoute['types']['allContext'],
+  //   TLoaderDeps extends Record<string, any> = TRoute['types']['loaderDeps'],
+  //   TLoaderData extends any = TRoute['types']['loaderData'],
+  // > = {
+  //   id: TId
+  //   useMatch: <TSelected = TAllContext>(opts?: {
+  //     select?: (s: TAllContext) => TSelected
+  //   }) => TSelected
+
+  //   useRouteContext: <TSelected = TAllContext>(opts?: {
+  //     select?: (s: TAllContext) => TSelected
+  //   }) => TSelected
+
+  //   useSearch: <TSelected = TFullSearchSchema>(opts?: {
+  //     select?: (s: TFullSearchSchema) => TSelected
+  //   }) => TSelected
+
+  //   useParams: <TSelected = TAllParams>(opts?: {
+  //     select?: (s: TAllParams) => TSelected
+  //   }) => TSelected
+
+  //   useLoaderDeps: <TSelected = TLoaderDeps>(opts?: {
+  //     select?: (s: TLoaderDeps) => TSelected
+  //   }) => TSelected
+
+  //   useLoaderData: <TSelected = TLoaderData>(opts?: {
+  //     select?: (s: TLoaderData) => TSelected
+  //   }) => TSelected
+  // }
+
+  // export function RouteApi_v2<
+  //   TId extends RouteIds<RegisteredRouter['routeTree']>,
+  //   TRoute extends AnyRoute = RouteById<RegisteredRouter['routeTree'], TId>,
+  //   TFullSearchSchema extends Record<
+  //     string,
+  //     any
+  //   > = TRoute['types']['fullSearchSchema'],
+  //   TAllParams extends AnyPathParams = TRoute['types']['allParams'],
+  //   TAllContext extends Record<string, any> = TRoute['types']['allContext'],
+  //   TLoaderDeps extends Record<string, any> = TRoute['types']['loaderDeps'],
+  //   TLoaderData extends any = TRoute['types']['loaderData'],
+  // >({
+  //   id,
+  // }: {
+  //   id: TId
+  // }): RouteApiInstance<
+  //   TId,
+  //   TRoute,
+  //   TFullSearchSchema,
+  //   TAllParams,
+  //   TAllContext,
+  //   TLoaderDeps,
+  //   TLoaderData
+  // > {
+  //   return {
+  //     id,
+
+  //     useMatch: (opts) => {
+  //       return useMatch({ ...opts, from: id })
+  //     },
+
+  //     useRouteContext: (opts) => {
+  //       return useMatch({
+  //         ...opts,
+  //         from: id,
+  //         select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
+  //       } as any)
+  //     },
+
+  //     useSearch: (opts) => {
+  //       return useSearch({ ...opts, from: id } as any)
+  //     },
+
+  //     useParams: (opts) => {
+  //       return useParams({ ...opts, from: id } as any)
+  //     },
+
+  //     useLoaderDeps: (opts) => {
+  //       return useLoaderDeps({ ...opts, from: id } as any) as any
+  //     },
+
+  //     useLoaderData: (opts) => {
+  //       return useLoaderData({ ...opts, from: id } as any) as any
+  //     },
+  //   }
+  // }
+
+  class RouteApi {
+    constructor({
+      id
+    }) {
+      this.id = id;
+    }
+    useMatch = opts => {
+      return useMatch({
+        select: opts?.select,
+        from: this.id
+      });
+    };
+    useRouteContext = opts => {
+      return useMatch({
+        from: this.id,
+        select: d => opts?.select ? opts.select(d.context) : d.context
+      });
+    };
+    useSearch = opts => {
+      return useSearch({
+        ...opts,
+        from: this.id
+      });
+    };
+    useParams = opts => {
+      return useParams({
+        ...opts,
+        from: this.id
+      });
+    };
+    useLoaderDeps = opts => {
+      return useLoaderDeps({
+        ...opts,
+        from: this.id
+      });
+    };
+    useLoaderData = opts => {
+      return useLoaderData({
+        ...opts,
+        from: this.id
+      });
+    };
+  }
+  class Route {
+    // Set up in this.init()
+
+    // customId!: TCustomId
+
+    // Optional
+
+    constructor(options) {
+      this.options = options || {};
+      this.isRoot = !options?.getParentRoute;
+      invariant(!(options?.id && options?.path), `Route cannot have both an 'id' and a 'path' option.`);
+      this.$$typeof = Symbol.for('react.memo');
+    }
+    init = opts => {
+      this.originalIndex = opts.originalIndex;
+      const options = this.options;
+      const isRoot = !options?.path && !options?.id;
+      this.parentRoute = this.options?.getParentRoute?.();
+      if (isRoot) {
+        this.path = rootRouteId;
+      } else {
+        invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
+      }
+      let path = isRoot ? rootRouteId : options.path;
+
+      // If the path is anything other than an index path, trim it up
+      if (path && path !== '/') {
+        path = trimPath(path);
+      }
+      const customId = options?.id || path;
+
+      // Strip the parentId prefix from the first level of children
+      let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
+      if (path === rootRouteId) {
+        path = '/';
+      }
+      if (id !== rootRouteId) {
+        id = joinPaths(['/', id]);
+      }
+      const fullPath = id === rootRouteId ? '/' : joinPaths([this.parentRoute.fullPath, path]);
+      this.path = path;
+      this.id = id;
+      // this.customId = customId as TCustomId
+      this.fullPath = fullPath;
+      this.to = fullPath;
+    };
+    addChildren = children => {
+      this.children = children;
+      return this;
+    };
+    updateLoader = options => {
+      Object.assign(this.options, options);
+      return this;
+    };
+    update = options => {
+      Object.assign(this.options, options);
+      return this;
+    };
+    useMatch = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id
       });
-      await Promise.all(matchPromises);
-      return matches;
     };
-    invalidate = () => {
-      const invalidate = d => ({
-        ...d,
-        invalid: true
+    useRouteContext = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id,
+        select: d => opts?.select ? opts.select(d.context) : d.context
       });
-      this.__store.setState(s => ({
-        ...s,
-        matches: s.matches.map(invalidate),
-        cachedMatches: s.cachedMatches.map(invalidate),
-        pendingMatches: s.pendingMatches?.map(invalidate)
-      }));
-      this.load();
     };
-    load = async () => {
-      const promise = new Promise(async (resolve, reject) => {
-        const next = this.latestLocation;
-        const prevLocation = this.state.resolvedLocation;
-        const pathDidChange = prevLocation.href !== next.href;
-        let latestPromise;
-
-        // Cancel any pending matches
-        this.cancelMatches();
-        this.emit({
-          type: 'onBeforeLoad',
-          fromLocation: prevLocation,
-          toLocation: next,
-          pathChanged: pathDidChange
-        });
-        let pendingMatches;
-        const previousMatches = this.state.matches;
-        this.__store.batch(() => {
-          this.cleanCache();
+    useSearch = opts => {
+      return useSearch({
+        ...opts,
+        from: this.id
+      });
+    };
+    useParams = opts => {
+      return useParams({
+        ...opts,
+        from: this.id
+      });
+    };
+    useLoaderDeps = opts => {
+      return useLoaderDeps({
+        ...opts,
+        from: this.id
+      });
+    };
+    useLoaderData = opts => {
+      return useLoaderData({
+        ...opts,
+        from: this.id
+      });
+    };
+  }
+  function rootRouteWithContext() {
+    return options => {
+      return new RootRoute(options);
+    };
+  }
+  class RootRoute extends Route {
+    constructor(options) {
+      super(options);
+    }
+  }
+  function createRouteMask(opts) {
+    return opts;
+  }
 
-          // Match the routes
-          pendingMatches = this.matchRoutes(next.pathname, next.search, {
-            debug: true
-          });
+  //
 
-          // Ingest the new matches
-          // If a cached moved to pendingMatches, remove it from cachedMatches
-          this.__store.setState(s => ({
-            ...s,
-            isLoading: true,
-            location: next,
-            pendingMatches,
-            cachedMatches: s.cachedMatches.filter(d => {
-              return !pendingMatches.find(e => e.id === d.id);
-            })
-          }));
-        });
-        try {
-          try {
-            // Load the matches
-            await this.loadMatches({
-              matches: pendingMatches,
-              checkLatest: () => this.checkLatest(promise)
-            });
-          } catch (err) {
-            // swallow this error, since we'll display the
-            // errors on the route components
-          }
+  class NotFoundRoute extends Route {
+    constructor(options) {
+      super({
+        ...options,
+        id: '404'
+      });
+    }
+  }
 
-          // Only apply the latest transition
-          if (latestPromise = this.checkLatest(promise)) {
-            return latestPromise;
-          }
-          const exitingMatches = previousMatches.filter(match => !pendingMatches.find(d => d.id === match.id));
-          const enteringMatches = pendingMatches.filter(match => !previousMatches.find(d => d.id === match.id));
-          const stayingMatches = previousMatches.filter(match => pendingMatches.find(d => d.id === match.id));
+  class FileRoute {
+    constructor(path) {
+      this.path = path;
+    }
+    createRoute = options => {
+      const route = new Route(options);
+      route.isRoot = false;
+      return route;
+    };
+  }
+  function FileRouteLoader(_path) {
+    return loaderFn => loaderFn;
+  }
 
-          // Commit the pending matches. If a previous match was
-          // removed, place it in the cachedMatches
-          this.__store.batch(() => {
-            this.__store.setState(s => ({
-              ...s,
-              isLoading: false,
-              matches: s.pendingMatches,
-              pendingMatches: undefined,
-              cachedMatches: [...s.cachedMatches, ...exitingMatches.filter(d => d.status !== 'error')]
-            }));
-            this.cleanCache();
-          })
+  function lazyRouteComponent(importer, exportName) {
+    let loadPromise;
+    const load = () => {
+      if (!loadPromise) {
+        loadPromise = importer();
+      }
+      return loadPromise;
+    };
+    const lazyComp = /*#__PURE__*/React__namespace.lazy(async () => {
+      const moduleExports = await load();
+      const comp = moduleExports[exportName ?? 'default'];
+      return {
+        default: comp
+      };
+    });
+    lazyComp.preload = load;
+    return lazyComp;
+  }
 
-          //
-          ;
-          [[exitingMatches, 'onLeave'], [enteringMatches, 'onEnter'], [stayingMatches, 'onStay']].forEach(([matches, hook]) => {
-            matches.forEach(match => {
-              this.looseRoutesById[match.routeId].options[hook]?.(match);
-            });
-          });
-          this.emit({
-            type: 'onLoad',
-            fromLocation: prevLocation,
-            toLocation: next,
-            pathChanged: pathDidChange
-          });
-          resolve();
-        } catch (err) {
-          // Only apply the latest transition
-          if (latestPromise = this.checkLatest(promise)) {
-            return latestPromise;
+  function _extends() {
+    _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];
           }
-          reject(err);
         }
-      });
-      this.latestLoadPromise = promise;
-      return this.latestLoadPromise;
+      }
+      return target;
     };
-    cleanCache = () => {
-      // This is where all of the garbage collection magic happens
-      this.__store.setState(s => {
-        return {
-          ...s,
-          cachedMatches: s.cachedMatches.filter(d => {
-            const route = this.looseRoutesById[d.routeId];
-            if (!route.options.loader) {
-              return false;
-            }
+    return _extends.apply(this, arguments);
+  }
+
+  const preloadWarning = 'Error preloading route! ☝️';
+  function useLinkProps(options) {
+    const router = useRouter();
+    const matchPathname = useMatch({
+      strict: false,
+      select: s => s.pathname
+    });
+    const {
+      // custom props
+      children,
+      target,
+      activeProps = () => ({
+        className: 'active'
+      }),
+      inactiveProps = () => ({}),
+      activeOptions,
+      disabled,
+      hash,
+      search,
+      params,
+      to,
+      state,
+      mask,
+      preload: userPreload,
+      preloadDelay: userPreloadDelay,
+      replace,
+      startTransition,
+      resetScroll,
+      // element props
+      style,
+      className,
+      onClick,
+      onFocus,
+      onMouseEnter,
+      onMouseLeave,
+      onTouchStart,
+      ...rest
+    } = options;
 
-            // If the route was preloaded, use the preloadGcTime
-            // otherwise, use the gcTime
-            const gcTime = (d.preload ? route.options.preloadGcTime ?? this.options.defaultPreloadGcTime : route.options.gcTime ?? this.options.defaultGcTime) ?? 5 * 60 * 1000;
-            return d.status !== 'error' && Date.now() - d.updatedAt < gcTime;
-          })
-        };
-      });
-    };
-    preloadRoute = async (navigateOpts = this.state.location) => {
-      let next = this.buildLocation(navigateOpts);
-      let matches = this.matchRoutes(next.pathname, next.search, {
-        throwOnError: true
-      });
-      const loadedMatchIds = Object.fromEntries([...this.state.matches, ...(this.state.pendingMatches ?? []), ...this.state.cachedMatches]?.map(d => [d.id, true]));
-      this.__store.batch(() => {
-        matches.forEach(match => {
-          if (!loadedMatchIds[match.id]) {
-            this.__store.setState(s => ({
-              ...s,
-              cachedMatches: [...s.cachedMatches, match]
-            }));
-          }
-        });
-      });
-      matches = await this.loadMatches({
-        matches,
-        preload: true,
-        checkLatest: () => undefined
-      });
-      return matches;
+    // 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 dest = {
+      from: options.to ? matchPathname : undefined,
+      ...options
     };
-    matchRoute = (location, opts) => {
-      location = {
-        ...location,
-        to: location.to ? this.resolvePathWithBase(location.from || '', location.to) : undefined
+    let type = 'internal';
+    try {
+      new URL(`${to}`);
+      type = 'external';
+    } catch {}
+    if (type === 'external') {
+      return {
+        href: to
       };
-      const next = this.buildLocation(location);
-      if (opts?.pending && this.state.status !== 'pending') {
-        return false;
-      }
-      const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
-      if (!baseLocation) {
-        return false;
-      }
-      const match = matchPathname(this.basepath, baseLocation.pathname, {
-        ...opts,
-        to: next.pathname
-      });
-      if (!match) {
-        return false;
+    }
+    const next = router.buildLocation(dest);
+    const preload = userPreload ?? router.options.defaultPreload;
+    const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
+    const isActive = useRouterState({
+      select: s => {
+        // Compare path/hash for matches
+        const currentPathSplit = s.location.pathname.split('/');
+        const nextPathSplit = next.pathname.split('/');
+        const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
+        // Combine the matches based on user router.options
+        const pathTest = activeOptions?.exact ? s.location.pathname === next.pathname : pathIsFuzzyEqual;
+        const hashTest = activeOptions?.includeHash ? s.location.hash === next.hash : true;
+        const searchTest = activeOptions?.includeSearch ?? true ? deepEqual(s.location.search, next.search, !activeOptions?.exact) : true;
+
+        // The final "active" test
+        return pathTest && hashTest && searchTest;
       }
-      if (match && (opts?.includeSearch ?? true)) {
-        return deepEqual(baseLocation.search, next.search, true) ? match : false;
+    });
+
+    // The click handler
+    const handleClick = e => {
+      if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
+        e.preventDefault();
+
+        // All is well? Navigate!
+        router.commitLocation({
+          ...next,
+          replace,
+          resetScroll,
+          startTransition
+        });
       }
-      return match;
-    };
-    injectHtml = async html => {
-      this.injectedHtml.push(html);
     };
-    dehydrateData = (key, getData) => {
-      if (typeof document === 'undefined') {
-        const strKey = typeof key === 'string' ? key : JSON.stringify(key);
-        this.injectHtml(async () => {
-          const id = `__TSR_DEHYDRATED__${strKey}`;
-          const data = typeof getData === 'function' ? await getData() : getData;
-          return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(strKey)}"] = ${JSON.stringify(data)}
-          ;(() => {
-            var el = document.getElementById('${id}')
-            el.parentElement.removeChild(el)
-          })()
-          </script>`;
+
+    // The click handler
+    const handleFocus = e => {
+      if (preload) {
+        router.preloadRoute(dest).catch(err => {
+          console.warn(err);
+          console.warn(preloadWarning);
         });
-        return () => this.hydrateData(key);
       }
-      return () => undefined;
     };
-    hydrateData = key => {
-      if (typeof document !== 'undefined') {
-        const strKey = typeof key === 'string' ? key : JSON.stringify(key);
-        return window[`__TSR_DEHYDRATED__${strKey}`];
+    const handleTouchStart = e => {
+      if (preload) {
+        router.preloadRoute(dest).catch(err => {
+          console.warn(err);
+          console.warn(preloadWarning);
+        });
       }
-      return undefined;
     };
-    dehydrate = () => {
-      return {
-        state: {
-          dehydratedMatches: this.state.matches.map(d => pick(d, ['id', 'status', 'updatedAt', 'loaderData']))
+    const handleEnter = e => {
+      const target = e.target || {};
+      if (preload) {
+        if (target.preloadTimeout) {
+          return;
         }
-      };
+        target.preloadTimeout = setTimeout(() => {
+          target.preloadTimeout = null;
+          router.preloadRoute(dest).catch(err => {
+            console.warn(err);
+            console.warn(preloadWarning);
+          });
+        }, preloadDelay);
+      }
     };
-    hydrate = async __do_not_use_server_ctx => {
-      let _ctx = __do_not_use_server_ctx;
-      // Client hydrates from window
-      if (typeof document !== 'undefined') {
-        _ctx = window.__TSR_DEHYDRATED__;
+    const handleLeave = e => {
+      const target = e.target || {};
+      if (target.preloadTimeout) {
+        clearTimeout(target.preloadTimeout);
+        target.preloadTimeout = null;
       }
-      invariant(_ctx, 'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?');
-      const ctx = _ctx;
-      this.dehydratedData = ctx.payload;
-      this.options.hydrate?.(ctx.payload);
-      const dehydratedState = ctx.router.state;
-      let matches = this.matchRoutes(this.state.location.pathname, this.state.location.search).map(match => {
-        const dehydratedMatch = dehydratedState.dehydratedMatches.find(d => d.id === match.id);
-        invariant(dehydratedMatch, `Could not find a client-side match for dehydrated match with id: ${match.id}!`);
-        if (dehydratedMatch) {
-          return {
-            ...match,
-            ...dehydratedMatch
-          };
-        }
-        return match;
-      });
-      this.__store.setState(s => {
-        return {
-          ...s,
-          matches: matches
-        };
+    };
+    const composeHandlers = handlers => e => {
+      if (e.persist) e.persist();
+      handlers.filter(Boolean).forEach(handler => {
+        if (e.defaultPrevented) return;
+        handler(e);
       });
     };
 
-    // resolveMatchPromise = (matchId: string, key: string, value: any) => {
-    //   state.matches
-    //     .find((d) => d.id === matchId)
-    //     ?.__promisesByKey[key]?.resolve(value)
-    // }
-  }
+    // Get the active props
+    const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
 
-  // A function that takes an import() argument which is a function and returns a new function that will
-  // proxy arguments from the caller to the imported function, retaining all type
-  // information along the way
-  function lazyFn(fn, key) {
-    return async (...args) => {
-      const imported = await fn();
-      return imported[key || 'default'](...args);
-    };
-  }
-  class SearchParamError extends Error {}
-  class PathParamError extends Error {}
-  function getInitialRouterState(location) {
+    // Get the inactive props
+    const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
     return {
-      isLoading: false,
-      isTransitioning: false,
-      status: 'idle',
-      resolvedLocation: {
-        ...location
+      ...resolvedActiveProps,
+      ...resolvedInactiveProps,
+      ...rest,
+      href: disabled ? undefined : next.maskedLocation ? next.maskedLocation.href : next.href,
+      onClick: composeHandlers([onClick, handleClick]),
+      onFocus: composeHandlers([onFocus, handleFocus]),
+      onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
+      onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+      onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
+      target,
+      style: {
+        ...style,
+        ...resolvedActiveProps.style,
+        ...resolvedInactiveProps.style
       },
-      location,
-      matches: [],
-      pendingMatches: [],
-      cachedMatches: [],
-      lastUpdated: Date.now()
+      className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
+      ...(disabled ? {
+        role: 'link',
+        'aria-disabled': true
+      } : undefined),
+      ['data-status']: isActive ? 'active' : undefined
     };
   }
+  const Link = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+    const linkProps = useLinkProps(props);
+    return /*#__PURE__*/React__namespace.createElement("a", _extends({
+      ref: ref
+    }, linkProps, {
+      children: typeof props.children === 'function' ? props.children({
+        isActive: linkProps['data-status'] === 'active'
+      }) : props.children
+    }));
+  });
+  function isCtrlEvent(e) {
+    return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+  }
 
   const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   const windowKey = 'window';
@@ -3454,7 +3508,9 @@
   exports.createRouteMask = createRouteMask;
   exports.decode = decode;
   exports.deepEqual = deepEqual;
+  exports.defaultDeserializeError = defaultDeserializeError;
   exports.defaultParseSearch = defaultParseSearch;
+  exports.defaultSerializeError = defaultSerializeError;
   exports.defaultStringifySearch = defaultStringifySearch;
   exports.defer = defer;
   exports.encode = encode;
@@ -3470,6 +3526,7 @@
   exports.isPlainObject = isPlainObject;
   exports.isRedirect = isRedirect;
   exports.isServer = isServer;
+  exports.isServerSideError = isServerSideError;
   exports.joinPaths = joinPaths;
   exports.last = last;
   exports.lazyFn = lazyFn;