@tanstack/react-router 1.6.1 → 1.7.0

package/build/esm/index.js

@@ -18,69 +18,6 @@ import * as React from 'react';
 import { useStore } from '@tanstack/react-store';
 import { Store } from '@tanstack/store';
 
-let routerContext = /*#__PURE__*/React.createContext(null);
-if (typeof document !== 'undefined') {
-  if (window.__TSR_ROUTER_CONTEXT__) {
-    routerContext = window.__TSR_ROUTER_CONTEXT__;
-  } else {
-    window.__TSR_ROUTER_CONTEXT__ = routerContext;
-  }
-}
-
-function useRouter(opts) {
-  const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
-  const value = React.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.createElement(CatchBoundaryImpl, {
@@ -172,6 +109,22 @@ function ErrorComponent({
   }, error.message ? /*#__PURE__*/React.createElement("code", null, error.message) : null)) : null);
 }
 
+let routerContext = /*#__PURE__*/React.createContext(null);
+if (typeof document !== 'undefined') {
+  if (window.__TSR_ROUTER_CONTEXT__) {
+    routerContext = window.__TSR_ROUTER_CONTEXT__;
+  } else {
+    window.__TSR_ROUTER_CONTEXT__ = routerContext;
+  }
+}
+
+function useRouter(opts) {
+  const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
+  const value = React.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
@@ -443,7 +396,12 @@ function MatchInner({
     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) {
@@ -564,114 +522,353 @@ function useLoaderData(opts) {
     }
   });
 }
-
-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.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.createElement(router.options.InnerWrap, null, /*#__PURE__*/React.createElement(Matches, null)) : /*#__PURE__*/React.createElement(Matches, null);
+  const provider = /*#__PURE__*/React.createElement(routerContext.Provider, {
+    value: router
+  }, matches, /*#__PURE__*/React.createElement(Transitioner, null));
+  if (router.options.Wrap) {
+    return /*#__PURE__*/React.createElement(router.options.Wrap, null, provider);
+  }
+  return provider;
+}
+function Transitioner() {
+  const mountLoadCount = React.useRef(0);
+  const router = useRouter();
+  const routerState = useRouterState({
+    select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
+  });
+  const [isTransitioning, startReactTransition] = useTransition();
+  router.startReactTransition = startReactTransition;
+  React.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.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) {
@@ -756,1827 +953,1684 @@ function matchByPath(basepath, from, matchLocation) {
   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.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.forwardRef((props, ref) => {
-  const linkProps = useLinkProps(props);
-  return /*#__PURE__*/React.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.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.createElement(router.options.InnerWrap, null, /*#__PURE__*/React.createElement(Matches, null)) : /*#__PURE__*/React.createElement(Matches, null);
-  const provider = /*#__PURE__*/React.createElement(routerContext.Provider, {
-    value: router
-  }, matches, /*#__PURE__*/React.createElement(Transitioner, null));
-  if (router.options.Wrap) {
-    return /*#__PURE__*/React.createElement(router.options.Wrap, null, provider);
-  }
-  return provider;
-}
-function Transitioner() {
-  const mountLoadCount = React.useRef(0);
-  const router = useRouter();
-  const routerState = useRouterState({
-    select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
-  });
-  const [isTransitioning, startReactTransition] = useTransition();
-  router.startReactTransition = startReactTransition;
-  React.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.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.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.forwardRef((props, ref) => {
+  const linkProps = useLinkProps(props);
+  return /*#__PURE__*/React.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.useLayoutEffect : React.useEffect;
 const windowKey = 'window';
@@ -2816,5 +2870,5 @@ function useRouteContext(opts) {
   });
 }
 
-export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, FileRouteLoader, Link, Match, MatchRoute, Matches, Navigate, NotFoundRoute, Outlet, PathParamError, RootRoute, Route, RouteApi, Router, RouterProvider, ScrollRestoration, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, deepEqual, defaultParseSearch, defaultStringifySearch, defer, encode, escapeJSON, functionalUpdate, getInitialRouterState, getRenderedMatches, getRouteMatch, interpolatePath, isDehydratedDeferred, isPlainArray, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchContext, matchPathname, parsePathname, parseSearchWith, pick, redirect, removeBasepath, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useAwaited, useBlocker, useElementScrollRestoration, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useLoaderData, useLoaderDeps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useParentMatches, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
+export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, FileRouteLoader, Link, Match, MatchRoute, Matches, Navigate, NotFoundRoute, Outlet, PathParamError, RootRoute, Route, RouteApi, Router, RouterProvider, ScrollRestoration, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, deepEqual, defaultDeserializeError, defaultParseSearch, defaultSerializeError, defaultStringifySearch, defer, encode, escapeJSON, functionalUpdate, getInitialRouterState, getRenderedMatches, getRouteMatch, interpolatePath, isDehydratedDeferred, isPlainArray, isPlainObject, isRedirect, isServer, isServerSideError, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchContext, matchPathname, parsePathname, parseSearchWith, pick, redirect, removeBasepath, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useAwaited, useBlocker, useElementScrollRestoration, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useLoaderData, useLoaderDeps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useParentMatches, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map