@tanstack/react-router 0.0.1-beta.204 → 0.0.1-beta.206

package/build/umd/index.development.js

@@ -9,10 +9,10 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('use-sync-external-store/shim/with-selector'), require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'use-sync-external-store/shim/with-selector', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouter = {}, global.withSelector, global.React));
-})(this, (function (exports, withSelector, React) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouter = {}, global.React));
+})(this, (function (exports, React) { 'use strict';
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -34,106 +34,6 @@
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-  /**
-   * @tanstack/store/src/index.ts
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
-  class Store {
-    listeners = new Set();
-    _batching = false;
-    _flushing = 0;
-    _nextPriority = null;
-    constructor(initialState, options) {
-      this.state = initialState;
-      this.options = options;
-    }
-    subscribe = listener => {
-      this.listeners.add(listener);
-      const unsub = this.options?.onSubscribe?.(listener, this);
-      return () => {
-        this.listeners.delete(listener);
-        unsub?.();
-      };
-    };
-    setState = (updater, opts) => {
-      const previous = this.state;
-      this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);
-      const priority = opts?.priority ?? this.options?.defaultPriority ?? 'high';
-      if (this._nextPriority === null) {
-        this._nextPriority = priority;
-      } else if (this._nextPriority === 'high') {
-        this._nextPriority = priority;
-      } else {
-        this._nextPriority = this.options?.defaultPriority ?? 'high';
-      }
-
-      // Always run onUpdate, regardless of batching
-      this.options?.onUpdate?.({
-        priority: this._nextPriority
-      });
-
-      // Attempt to flush
-      this._flush();
-    };
-    _flush = () => {
-      if (this._batching) return;
-      const flushId = ++this._flushing;
-      this.listeners.forEach(listener => {
-        if (this._flushing !== flushId) return;
-        listener({
-          priority: this._nextPriority ?? 'high'
-        });
-      });
-    };
-    batch = cb => {
-      if (this._batching) return cb();
-      this._batching = true;
-      cb();
-      this._batching = false;
-      this._flush();
-    };
-  }
-
-  /**
-   * @tanstack/react-store/src/index.tsx
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
-
-  function useStore(store, selector = d => d) {
-    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow$1);
-    return slice;
-  }
-  function shallow$1(objA, objB) {
-    if (Object.is(objA, objB)) {
-      return true;
-    }
-    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-      return false;
-    }
-    const keysA = Object.keys(objA);
-    if (keysA.length !== Object.keys(objB).length) {
-      return false;
-    }
-    for (let i = 0; i < keysA.length; i++) {
-      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
-        return false;
-      }
-    }
-    return true;
-  }
-
   /**
    * @tanstack/history/src/index.ts
    *
@@ -181,7 +81,6 @@
       while (queue.length) {
         queue.shift()?.();
       }
-      onUpdate();
     };
     const queueTask = task => {
       queue.push(task);
@@ -241,7 +140,7 @@
       },
       flush: () => opts.flush?.(),
       destroy: () => opts.destroy?.(),
-      update: onUpdate
+      notify: onUpdate
     };
   }
   function assignKey(state) {
@@ -327,7 +226,7 @@
     };
     const onPushPop = () => {
       currentLocation = parseLocation(getHref(), window.history.state);
-      history.update();
+      history.notify();
     };
     var originalPushState = window.history.pushState;
     var originalReplaceState = window.history.replaceState;
@@ -351,12 +250,12 @@
     window.addEventListener(popStateEvent, onPushPop);
     window.history.pushState = function () {
       let res = originalPushState.apply(window.history, arguments);
-      if (tracking) history.update();
+      if (tracking) history.notify();
       return res;
     };
     window.history.replaceState = function () {
       let res = originalReplaceState.apply(window.history, arguments);
-      if (tracking) history.update();
+      if (tracking) history.notify();
       return res;
     };
     return history;
@@ -442,17 +341,6 @@
     }
   }
 
-  /**
-   * @tanstack/router-core/src/index.ts
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
-
   // export type Expand<T> = T
 
   // type Compute<T> = { [K in keyof T]: T[K] } | never
@@ -470,6 +358,40 @@
   //       : never
   //   }
   // >
+  // // Sample types to merge
+  // type TypeA = {
+  //   shared: string
+  //   onlyInA: string
+  //   nested: {
+  //     shared: string
+  //     aProp: string
+  //   }
+  //   array: string[]
+  // }
+  // type TypeB = {
+  //   shared: number
+  //   onlyInB: number
+  //   nested: {
+  //     shared: number
+  //     bProp: number
+  //   }
+  //   array: number[]
+  // }
+  // type TypeC = {
+  //   shared: boolean
+  //   onlyInC: boolean
+  //   nested: {
+  //     shared: boolean
+  //     cProp: boolean
+  //   }
+  //   array: boolean[]
+  // }
+  // type Test = Expand<Assign<TypeA, TypeB>>
+  // // Using DeepMerge to merge TypeA and TypeB
+  // type MergedType = Expand<AssignAll<[TypeA, TypeB, TypeC]>>
+  //
+
+  const isServer = typeof document === 'undefined';
   function last(arr) {
     return arr[arr.length - 1];
   }
@@ -563,6 +485,12 @@
     }
     return false;
   }
+  function useStableCallback(fn) {
+    const fnRef = React__namespace.useRef(fn);
+    fnRef.current = fn;
+    const ref = React__namespace.useRef((...args) => fnRef.current(...args));
+    return ref.current;
+  }
 
   function joinPaths(paths) {
     return cleanPath(paths.filter(Boolean).join('/'));
@@ -796,102 +724,19 @@
     return out;
   }
 
-  const rootRouteId = '__root__';
-
-  // The parse type here allows a zod schema to be passed directly to the validator
-
-  // T extends Record<PropertyKey, infer U>
-  //   ? {
-  //       [K in keyof T]: UseLoaderResultPromise<T[K]>
-  //     }
-  //   : UseLoaderResultPromise<T>
-
-  // export type UseLoaderResultPromise<T> = T extends Promise<infer U>
-  //   ? StreamedPromise<U>
-  //   : T
-  class Route {
-    // Set up in this.init()
-
-    // customId!: TCustomId
-
-    // Optional
-
-    constructor(options) {
-      this.options = options || {};
-      this.isRoot = !options?.getParentRoute;
-      Route.__onInit(this);
-    }
-    init = opts => {
-      this.originalIndex = opts.originalIndex;
-      this.router = opts.router;
-      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]);
+  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];
+          }
+        }
       }
-      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;
-    };
-    update = options => {
-      Object.assign(this.options, options);
-      return this;
-    };
-    static __onInit = route => {
-      // This is a dummy static method that should get
-      // replaced by a framework specific implementation if necessary
-    };
-  }
-  class RouterContext {
-    constructor() {}
-    createRootRoute = options => {
-      return new RootRoute(options);
-    };
-  }
-  class RootRoute extends Route {
-    constructor(options) {
-      super(options);
-    }
-  }
-  function createRouteMask(opts) {
-    return opts;
-  }
-
-  class FileRoute {
-    constructor(path) {
-      this.path = path;
-    }
-    createRoute = options => {
-      const route = new Route(options);
-      route.isRoot = false;
-      return route;
+      return target;
     };
+    return _extends.apply(this, arguments);
   }
 
   const defaultParseSearch = parseSearchWith(JSON.parse);
@@ -958,76 +803,22 @@
 
   //
 
+  //
+
   const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-  const visibilityChangeEvent = 'visibilitychange';
-  const focusEvent = 'focus';
-  const preloadWarning = 'Error preloading route! ☝️';
   class Router {
-    #unsubHistory;
-    resetNextScroll = false;
-    tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
-    // nextTemporaryLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>
-
+    // dehydratedData?: TDehydrated
+    // resetNextScroll = false
+    // tempLocationKey = `${Math.round(Math.random() * 10000000)}`
     constructor(options) {
       this.options = {
         defaultPreloadDelay: 50,
-        context: undefined,
+        meta: undefined,
         ...options,
         stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
         parseSearch: options?.parseSearch ?? defaultParseSearch
-        // fetchServerDataFn: options?.fetchServerDataFn ?? defaultFetchServerDataFn,
       };
-
-      this.__store = new Store(getInitialRouterState(), {
-        onUpdate: () => {
-          const prev = this.state;
-          const next = this.__store.state;
-          const matchesByIdChanged = prev.matchesById !== next.matchesById;
-          let matchesChanged;
-          let pendingMatchesChanged;
-          if (!matchesByIdChanged) {
-            matchesChanged = prev.matchIds.length !== next.matchIds.length || prev.matchIds.some((d, i) => d !== next.matchIds[i]);
-            pendingMatchesChanged = prev.pendingMatchIds.length !== next.pendingMatchIds.length || prev.pendingMatchIds.some((d, i) => d !== next.pendingMatchIds[i]);
-          }
-          if (matchesByIdChanged || matchesChanged) {
-            next.matches = next.matchIds.map(id => {
-              return next.matchesById[id];
-            });
-          }
-          if (matchesByIdChanged || pendingMatchesChanged) {
-            next.pendingMatches = next.pendingMatchIds.map(id => {
-              return next.matchesById[id];
-            });
-          }
-          if (matchesByIdChanged || matchesChanged || pendingMatchesChanged) {
-            const hasPendingComponent = next.pendingMatches.some(d => {
-              const route = this.getRoute(d.routeId);
-              return !!route?.options.pendingComponent;
-            });
-            next.renderedMatchIds = hasPendingComponent ? next.pendingMatchIds : next.matchIds;
-            next.renderedMatches = next.renderedMatchIds.map(id => {
-              return next.matchesById[id];
-            });
-          }
-          next.isFetching = [...next.matches, ...next.pendingMatches].some(d => d.isFetching);
-          this.state = next;
-        },
-        defaultPriority: 'low'
-      });
-      this.state = this.__store.state;
-      this.update(options);
-      const nextLocation = this.buildLocation({
-        search: true,
-        params: true,
-        hash: true,
-        state: true
-      });
-      if (this.state.location.href !== nextLocation.href) {
-        this.#commitLocation({
-          ...nextLocation,
-          replace: true
-        });
-      }
+      this.routeTree = this.options.routeTree;
     }
     subscribers = new Set();
     subscribe = (eventType, fn) => {
@@ -1040,245 +831,329 @@
         this.subscribers.delete(listener);
       };
     };
-    #emit = routerEvent => {
+    emit = routerEvent => {
       this.subscribers.forEach(listener => {
         if (listener.eventType === routerEvent.type) {
           listener.fn(routerEvent);
         }
       });
     };
-    reset = () => {
-      this.__store.setState(s => Object.assign(s, getInitialRouterState()));
-    };
-    mount = () => {
-      // addEventListener does not exist in React Native, but window does
-      // In the future, we might need to invert control here for more adapters
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (typeof window !== 'undefined' && window.addEventListener) {
-        window.addEventListener(visibilityChangeEvent, this.#onFocus, false);
-        window.addEventListener(focusEvent, this.#onFocus, false);
-      }
-      this.safeLoad();
-      return () => {
-        if (typeof window !== 'undefined' && window.removeEventListener) {
-          window.removeEventListener(visibilityChangeEvent, this.#onFocus);
-          window.removeEventListener(focusEvent, this.#onFocus);
-        }
-      };
-    };
-    #onFocus = () => {
-      if (this.options.reloadOnWindowFocus ?? true) {
-        this.invalidate({
-          __fromFocus: true
-        });
-      }
-    };
-    update = opts => {
-      this.options = {
-        ...this.options,
-        ...opts,
-        context: {
-          ...this.options.context,
-          ...opts?.context
-        }
-      };
-      if (!this.history || this.options.history && this.options.history !== this.history) {
-        if (this.#unsubHistory) {
-          this.#unsubHistory();
-        }
-        this.history = this.options.history ?? (isServer ? createMemoryHistory() : createBrowserHistory());
-        const parsedLocation = this.#parseLocation();
-        this.__store.setState(s => ({
-          ...s,
-          resolvedLocation: parsedLocation,
-          location: parsedLocation
-        }));
-        this.#unsubHistory = this.history.subscribe(() => {
-          this.safeLoad({
-            next: this.#parseLocation(this.state.location)
-          });
-        });
-      }
-      const {
-        basepath,
-        routeTree
-      } = this.options;
-      this.basepath = `/${trimPath(basepath ?? '') ?? ''}`;
-      if (routeTree && routeTree !== this.routeTree) {
-        this.#processRoutes(routeTree);
-      }
-      return this;
-    };
-    cancelMatches = () => {
-      this.state.matches.forEach(match => {
-        this.cancelMatch(match.id);
-      });
-    };
-    cancelMatch = id => {
-      this.getRouteMatch(id)?.abortController?.abort();
-    };
-    safeLoad = async opts => {
-      try {
-        return this.load(opts);
-      } catch (err) {
-        // Don't do anything
-      }
-    };
-    latestLoadPromise = Promise.resolve();
-    load = async opts => {
-      const promise = new Promise(async (resolve, reject) => {
-        const prevLocation = this.state.resolvedLocation;
-        const pathDidChange = !!(opts?.next && prevLocation.href !== opts.next.href);
-        let latestPromise;
-        const checkLatest = () => {
-          return this.latestLoadPromise !== promise ? this.latestLoadPromise : undefined;
-        };
 
-        // Cancel any pending matches
+    // dehydrate = (): DehydratedRouter => {
+    //   return {
+    //     state: {
+    //       dehydratedMatches: state.matches.map((d) =>
+    //         pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt']),
+    //       ),
+    //     },
+    //   }
+    // }
 
-        let pendingMatches;
-        this.#emit({
-          type: 'onBeforeLoad',
-          from: prevLocation,
-          to: opts?.next ?? this.state.location,
-          pathChanged: pathDidChange
-        });
-        this.__store.batch(() => {
-          if (opts?.next) {
-            // Ingest the new location
-            this.__store.setState(s => ({
-              ...s,
-              location: opts.next
-            }));
-          }
+    // hydrate = async (__do_not_use_server_ctx?: HydrationCtx) => {
+    //   let _ctx = __do_not_use_server_ctx
+    //   // Client hydrates from window
+    //   if (typeof document !== 'undefined') {
+    //     _ctx = window.__TSR_DEHYDRATED__
+    //   }
+
+    //   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 as any
+    //   this.options.hydrate?.(ctx.payload as any)
+    //   const dehydratedState = ctx.router.state
+
+    //   let matches = this.matchRoutes(
+    //     state.location.pathname,
+    //     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.setState((s) => {
+    //     return {
+    //       ...s,
+    //       matches: dehydratedState.dehydratedMatches as any,
+    //     }
+    //   })
+    // }
 
-          // Match the routes
-          pendingMatches = this.matchRoutes(this.state.location.pathname, this.state.location.search, {
-            throwOnError: opts?.throwOnError,
-            debug: true
-          });
-          this.__store.setState(s => ({
-            ...s,
-            status: 'pending',
-            pendingMatchIds: pendingMatches.map(d => d.id),
-            matchesById: this.#mergeMatches(s.matchesById, pendingMatches)
-          }));
-        });
-        try {
-          // Load the matches
-          try {
-            await this.loadMatches(pendingMatches.map(d => d.id));
-          } catch (err) {
-            // swallow this error, since we'll display the
-            // errors on the route components
-          }
+    // TODO:
+    // injectedHtml: (string | (() => Promise<string> | string))[] = []
 
-          // Only apply the latest transition
-          if (latestPromise = checkLatest()) {
-            return latestPromise;
-          }
-          const exitingMatchIds = this.state.matchIds.filter(id => !this.state.pendingMatchIds.includes(id));
-          const enteringMatchIds = this.state.pendingMatchIds.filter(id => !this.state.matchIds.includes(id));
-          const stayingMatchIds = this.state.matchIds.filter(id => this.state.pendingMatchIds.includes(id));
-          this.__store.setState(s => ({
-            ...s,
-            status: 'idle',
-            resolvedLocation: s.location,
-            matchIds: s.pendingMatchIds,
-            pendingMatchIds: []
-          }));
-          [[exitingMatchIds, 'onLeave'], [enteringMatchIds, 'onEnter'], [stayingMatchIds, 'onTransition']].forEach(([matchIds, hook]) => {
-            matchIds.forEach(id => {
-              const match = this.getRouteMatch(id);
-              const route = this.getRoute(match.routeId);
-              route.options[hook]?.(match);
-            });
-          });
-          this.#emit({
-            type: 'onLoad',
-            from: prevLocation,
-            to: this.state.location,
-            pathChanged: pathDidChange
-          });
-          resolve();
-        } catch (err) {
-          // Only apply the latest transition
-          if (latestPromise = checkLatest()) {
-            return latestPromise;
-          }
-          reject(err);
-        }
-      });
-      this.latestLoadPromise = promise;
-      this.latestLoadPromise.then(() => {
-        this.cleanMatches();
-      });
-      return this.latestLoadPromise;
+    // TODO:
+    // injectHtml = async (html: string | (() => Promise<string> | string)) => {
+    //   this.injectedHtml.push(html)
+    // }
+
+    // TODO:
+    // dehydrateData = <T>(key: any, getData: T | (() => Promise<T> | T)) => {
+    //   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 as any)() : 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<T>(key)
+    //   }
+
+    //   return () => undefined
+    // }
+
+    // hydrateData = <T = unknown>(key: any) => {
+    //   if (typeof document !== 'undefined') {
+    //     const strKey = typeof key === 'string' ? key : JSON.stringify(key)
+
+    //     return window[`__TSR_DEHYDRATED__${strKey}` as any] as T
+    //   }
+
+    //   return undefined
+    // }
+
+    // resolveMatchPromise = (matchId: string, key: string, value: any) => {
+    //   state.matches
+    //     .find((d) => d.id === matchId)
+    //     ?.__promisesByKey[key]?.resolve(value)
+    // }
+
+    // setRouteMatch = (
+    //   id: string,
+    //   pending: boolean,
+    //   updater: NonNullableUpdater<RouteMatch<TRouteTree>>,
+    // ) => {
+    //   const key = pending ? 'pendingMatches' : 'matches'
+
+    //   this.setState((prev) => {
+    //     return {
+    //       ...prev,
+    //       [key]: prev[key].map((d) => {
+    //         if (d.id === id) {
+    //           return functionalUpdate(updater, d)
+    //         }
+
+    //         return d
+    //       }),
+    //     }
+    //   })
+    // }
+
+    // setPendingRouteMatch = (
+    //   id: string,
+    //   updater: NonNullableUpdater<RouteMatch<TRouteTree>>,
+    // ) => {
+    //   this.setRouteMatch(id, true, updater)
+    // }
+  }
+
+  // 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);
     };
-    #mergeMatches = (prevMatchesById, nextMatches) => {
-      let matchesById = {
-        ...prevMatchesById
-      };
-      nextMatches.forEach(match => {
-        if (!matchesById[match.id]) {
-          matchesById[match.id] = match;
-        }
-        matchesById[match.id] = {
-          ...matchesById[match.id],
-          ...match
-        };
-      });
-      return matchesById;
+  }
+
+  // Detect if we're in the DOM
+
+  function redirect(opts) {
+    opts.isRedirect = true;
+    return opts;
+  }
+  function isRedirect(obj) {
+    return !!obj?.isRedirect;
+  }
+
+  const preloadWarning = 'Error preloading route! ☝️';
+  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  function getInitialRouterState(location) {
+    return {
+      status: 'idle',
+      isFetching: false,
+      resolvedLocation: location,
+      location: location,
+      matches: [],
+      pendingMatches: [],
+      lastUpdated: Date.now()
     };
-    getRoute = id => {
-      const route = this.routesById[id];
-      invariant(route, `Route with id "${id}" not found`);
-      return route;
+  }
+  function RouterProvider({
+    router,
+    ...rest
+  }) {
+    const options = {
+      ...router.options,
+      ...rest,
+      meta: {
+        ...router.options.meta,
+        ...rest?.meta
+      }
     };
-    preloadRoute = async (navigateOpts = this.state.location) => {
-      let next = this.buildLocation(navigateOpts);
-      const matches = this.matchRoutes(next.pathname, next.search, {
-        throwOnError: true
-      });
-      this.__store.setState(s => {
+    const history = React__namespace.useState(() => options.history ?? createBrowserHistory())[0];
+    const tempLocationKeyRef = React__namespace.useRef(`${Math.round(Math.random() * 10000000)}`);
+    const resetNextScrollRef = React__namespace.useRef(false);
+    const navigateTimeoutRef = React__namespace.useRef(null);
+    const parseLocation = useStableCallback(previousLocation => {
+      const parse = ({
+        pathname,
+        search,
+        hash,
+        state
+      }) => {
+        const parsedSearch = options.parseSearch(search);
         return {
-          ...s,
-          matchesById: this.#mergeMatches(s.matchesById, matches)
+          pathname: pathname,
+          searchStr: search,
+          search: replaceEqualDeep(previousLocation?.search, parsedSearch),
+          hash: hash.split('#').reverse()[0] ?? '',
+          href: `${pathname}${search}${hash}`,
+          state: replaceEqualDeep(previousLocation?.state, state)
         };
-      });
-      await this.loadMatches(matches.map(d => d.id), {
-        preload: true,
-        maxAge: navigateOpts.maxAge
-      });
-      return [last(matches), matches];
-    };
-    cleanMatches = () => {
-      const now = Date.now();
-      const outdatedMatchIds = Object.values(this.state.matchesById).filter(match => {
-        const route = this.getRoute(match.routeId);
-        return !this.state.matchIds.includes(match.id) && !this.state.pendingMatchIds.includes(match.id) && (match.preloadMaxAge > -1 ? match.updatedAt + match.preloadMaxAge < now : true) && (route.options.gcMaxAge ? match.updatedAt + route.options.gcMaxAge < now : true);
-      }).map(d => d.id);
-      if (outdatedMatchIds.length) {
-        this.__store.setState(s => {
-          const matchesById = {
-            ...s.matchesById
-          };
-          outdatedMatchIds.forEach(id => {
-            delete matchesById[id];
+      };
+      const location = parse(history.location);
+      let {
+        __tempLocation,
+        __tempKey
+      } = location.state;
+      if (__tempLocation && (!__tempKey || __tempKey === tempLocationKeyRef.current)) {
+        // 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;
+    });
+    const [state, setState] = React__namespace.useState(() => getInitialRouterState(parseLocation()));
+    const basepath = `/${trimPath(options.basepath ?? '') ?? ''}`;
+    const resolvePathWithBase = useStableCallback((from, path) => {
+      return resolvePath(basepath, from, cleanPath(path));
+    });
+    const [routesById, routesByPath] = React__namespace.useMemo(() => {
+      const routesById = {};
+      const routesByPath = {};
+      const recurseRoutes = routes => {
+        routes.forEach((route, i) => {
+          route.init({
+            originalIndex: i
           });
-          return {
-            ...s,
-            matchesById
-          };
+          const existingRoute = routesById[route.id];
+          invariant(!existingRoute, `Duplicate routes found with id: ${String(route.id)}`);
+          routesById[route.id] = route;
+          if (!route.isRoot && route.path) {
+            const trimmedFullPath = trimPathRight(route.fullPath);
+            if (!routesByPath[trimmedFullPath] || route.fullPath.endsWith('/')) {
+              routesByPath[trimmedFullPath] = route;
+            }
+          }
+          const children = route.children;
+          if (children?.length) {
+            recurseRoutes(children);
+          }
         });
+      };
+      recurseRoutes([router.routeTree]);
+      return [routesById, routesByPath];
+    }, []);
+    const looseRoutesById = routesById;
+    const flatRoutes = React__namespace.useMemo(() => Object.values(routesByPath).map((d, i) => {
+      const trimmed = trimPath(d.fullPath);
+      const parsed = parsePathname(trimmed);
+      while (parsed.length > 1 && parsed[0]?.value === '/') {
+        parsed.shift();
+      }
+      const score = parsed.map(d => {
+        if (d.type === 'param') {
+          return 0.5;
+        }
+        if (d.type === 'wildcard') {
+          return 0.25;
+        }
+        return 1;
+      });
+      return {
+        child: d,
+        trimmed,
+        parsed,
+        index: i,
+        score
+      };
+    }).sort((a, b) => {
+      let isIndex = a.trimmed === '/' ? 1 : b.trimmed === '/' ? -1 : 0;
+      if (isIndex !== 0) return isIndex;
+      const length = Math.min(a.score.length, b.score.length);
+
+      // Sort by length of score
+      if (a.score.length !== b.score.length) {
+        return b.score.length - a.score.length;
       }
-    };
-    matchRoutes = (pathname, locationSearch, opts) => {
+
+      // Sort by min available score
+      for (let i = 0; i < length; i++) {
+        if (a.score[i] !== b.score[i]) {
+          return b.score[i] - a.score[i];
+        }
+      }
+
+      // Sort by min available parsed value
+      for (let i = 0; i < length; i++) {
+        if (a.parsed[i].value !== b.parsed[i].value) {
+          return a.parsed[i].value > b.parsed[i].value ? 1 : -1;
+        }
+      }
+
+      // Sort by length of trimmed full path
+      if (a.trimmed !== b.trimmed) {
+        return a.trimmed > b.trimmed ? 1 : -1;
+      }
+
+      // Sort by original index
+      return a.index - b.index;
+    }).map((d, i) => {
+      d.child.rank = i;
+      return d.child;
+    }), [routesByPath]);
+    const latestLoadPromiseRef = React__namespace.useRef(Promise.resolve());
+    const matchRoutes = useStableCallback((pathname, locationSearch, opts) => {
       let routeParams = {};
-      let foundRoute = this.flatRoutes.find(route => {
-        const matchedParams = matchPathname(this.basepath, trimPathRight(pathname), {
+      let foundRoute = flatRoutes.find(route => {
+        const matchedParams = matchPathname(basepath, trimPathRight(pathname), {
           to: route.fullPath,
-          caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive
+          caseSensitive: route.options.caseSensitive ?? options.caseSensitive,
+          fuzzy: false
         });
         if (matchedParams) {
           routeParams = matchedParams;
@@ -1286,7 +1161,7 @@
         }
         return false;
       });
-      let routeCursor = foundRoute || this.routesById['__root__'];
+      let routeCursor = foundRoute || routesById['__root__'];
       let matchedRoutes = [routeCursor];
       // let includingLayouts = true
       while (routeCursor?.parentRoute) {
@@ -1318,24 +1193,12 @@
       });
       const matches = matchedRoutes.map((route, index) => {
         const interpolatedPath = interpolatePath(route.path, routeParams);
-        const loaderContext = route.options.loaderContext ? route.options.loaderContext({
-          search: locationSearch
-        }) : undefined;
-        const matchId = JSON.stringify([interpolatePath(route.id, routeParams, true), loaderContext].filter(d => d !== undefined), (key, value) => {
-          if (typeof value === 'function') {
-            console.info(route);
-            invariant(false, `Cannot return functions and other non-serializable values from routeOptions.loaderContext! Please use routeOptions.beforeLoad to do this. Route info is logged above 👆`);
-          }
-          if (typeof value === 'object' && value !== null) {
-            return Object.fromEntries(Object.keys(value).sort().map(key => [key, value[key]]));
-          }
-          return value;
-        });
+        const matchId = interpolatePath(route.id, routeParams, true);
 
         // 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 = this.getRouteMatch(matchId);
+        const existingMatch = getRouteMatch(state, matchId);
         if (existingMatch) {
           return {
             ...existingMatch
@@ -1343,16 +1206,13 @@
         }
 
         // Create a fresh route match
-        const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
+        const hasLoaders = !!(route.options.load || componentTypes.some(d => route.options[d]?.preload));
         const routeMatch = {
           id: matchId,
-          loaderContext,
           routeId: route.id,
           params: routeParams,
-          pathname: joinPaths([this.basepath, interpolatedPath]),
+          pathname: joinPaths([basepath, interpolatedPath]),
           updatedAt: Date.now(),
-          maxAge: -1,
-          preloadMaxAge: -1,
           routeSearch: {},
           search: {},
           status: hasLoaders ? 'pending' : 'success',
@@ -1361,21 +1221,20 @@
           error: undefined,
           paramsError: parseErrors[index],
           searchError: undefined,
-          loaderData: undefined,
           loadPromise: Promise.resolve(),
-          context: undefined,
+          meta: undefined,
           abortController: new AbortController(),
           fetchedAt: 0
         };
         return routeMatch;
       });
 
-      // Take each match and resolve its search params and context
+      // Take each match and resolve its search params and meta
       // This has to happen after the matches are created or found
-      // so that we can use the parent match's search params and context
+      // so that we can use the parent match's search params and meta
       matches.forEach((match, i) => {
         const parentMatch = matches[i - 1];
-        const route = this.getRoute(match.routeId);
+        const route = looseRoutesById[match.routeId];
         const searchInfo = (() => {
           // Validate the search params and stabilize them
           const parentSearchInfo = {
@@ -1409,117 +1268,268 @@
         Object.assign(match, searchInfo);
       });
       return matches;
-    };
-    loadMatches = async (matchIds, opts) => {
-      const getFreshMatches = () => matchIds.map(d => this.getRouteMatch(d));
-      if (!opts?.preload) {
-        getFreshMatches().forEach(match => {
-          // Update each match with its latest route data
-          this.setRouteMatch(match.id, s => ({
-            ...s,
-            routeSearch: match.routeSearch,
-            search: match.search,
-            context: match.context,
-            error: match.error,
-            paramsError: match.paramsError,
-            searchError: match.searchError,
-            params: match.params,
-            preloadMaxAge: 0
-          }));
-        });
-      }
-      let firstBadMatchIndex;
+    });
+    const cancelMatch = useStableCallback(id => {
+      getRouteMatch(state, id)?.abortController?.abort();
+    });
+    const cancelMatches = useStableCallback(state => {
+      state.matches.forEach(match => {
+        cancelMatch(match.id);
+      });
+    });
+    const buildLocation = useStableCallback((opts = {}) => {
+      const build = (dest = {}, matches) => {
+        const from = latestLocationRef.current;
+        const fromPathname = dest.from ?? from.pathname;
+        let pathname = resolvePathWithBase(fromPathname, `${dest.to ?? ''}`);
+        const fromMatches = matchRoutes(fromPathname, from.search);
+        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 => looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach(fn => {
+            nextParams = {
+              ...nextParams,
+              ...fn(nextParams)
+            };
+          });
+        }
+        pathname = interpolatePath(pathname, nextParams ?? {});
+        const preSearchFilters = stayingMatches?.map(match => looseRoutesById[match.routeId].options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+        const postSearchFilters = stayingMatches?.map(match => looseRoutesById[match.routeId].options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
 
-      // Check each match middleware to see if the route can be accessed
-      try {
-        for (const [index, match] of getFreshMatches().entries()) {
-          const parentMatch = getFreshMatches()[index - 1];
-          const route = this.getRoute(match.routeId);
-          const handleError = (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;
-              }
+        // Pre filters first
+        const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), from.search) : from.search;
+
+        // Then the link/navigate function
+        const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+        : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+        : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
+        : {};
+
+        // Then post filters
+        const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+        const search = replaceEqualDeep(from.search, postFilteredSearch);
+        const searchStr = options.stringifySearch(search);
+        const hash = dest.hash === true ? from.hash : dest.hash ? functionalUpdate(dest.hash, from.hash) : from.hash;
+        const hashStr = hash ? `#${hash}` : '';
+        let nextState = dest.state === true ? from.state : dest.state ? functionalUpdate(dest.state, from.state) : from.state;
+        nextState = replaceEqualDeep(from.state, nextState);
+        return {
+          pathname,
+          search,
+          searchStr,
+          state: nextState,
+          hash,
+          href: history.createHref(`${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 = options.routeMasks?.find(d => {
+            const match = matchPathname(basepath, next.pathname, {
+              to: d.from,
+              caseSensitive: false,
+              fuzzy: false
+            });
+            if (match) {
+              params = match;
+              return true;
             }
-            this.setRouteMatch(match.id, s => ({
-              ...s,
-              error: err,
-              status: 'error',
-              updatedAt: Date.now()
-            }));
-          };
-          if (match.paramsError) {
-            handleError(match.paramsError, 'PARSE_PARAMS');
-          }
-          if (match.searchError) {
-            handleError(match.searchError, 'VALIDATE_SEARCH');
-          }
-          let didError = false;
-          const parentContext = parentMatch?.context ?? this?.options.context ?? {};
-          try {
-            const beforeLoadContext = (await route.options.beforeLoad?.({
-              abortController: match.abortController,
-              params: match.params,
-              preload: !!opts?.preload,
-              context: {
-                ...parentContext,
-                ...match.loaderContext
-              }
-            })) ?? {};
-            const context = {
-              ...parentContext,
-              ...match.loaderContext,
-              ...beforeLoadContext
+            return false;
+          });
+          if (foundMask) {
+            foundMask = {
+              ...foundMask,
+              from: interpolatePath(foundMask.from, params)
             };
-            this.setRouteMatch(match.id, s => ({
-              ...s,
-              context: replaceEqualDeep(s.context, context)
-            }));
-          } catch (err) {
-            handleError(err, 'BEFORE_LOAD');
-            didError = true;
-          }
-
-          // If we errored, do not run the next matches' middleware
-          if (didError) {
-            break;
+            maskedDest = foundMask;
+            maskedNext = build(maskedDest);
           }
         }
-      } catch (err) {
-        if (isRedirect(err)) {
-          if (!opts?.preload) this.navigate(err);
-          return;
+        const nextMatches = matchRoutes(next.pathname, next.search);
+        const maskedMatches = maskedNext ? matchRoutes(maskedNext.pathname, maskedNext.search) : undefined;
+        const maskedFinal = maskedNext ? build(maskedDest, maskedMatches) : undefined;
+        const final = build(dest, nextMatches);
+        if (maskedFinal) {
+          final.maskedLocation = maskedFinal;
         }
-        throw err;
-      }
-      const validResolvedMatches = getFreshMatches().slice(0, firstBadMatchIndex);
-      const matchPromises = [];
-      validResolvedMatches.forEach((match, index) => {
-        matchPromises.push((async () => {
-          const parentMatchPromise = matchPromises[index - 1];
-          const route = this.getRoute(match.routeId);
-          if (match.isFetching || match.status === 'success' && !isMatchInvalid(match, {
-            preload: opts?.preload
-          })) {
-            return this.getRouteMatch(match.id)?.loadPromise;
+        return final;
+      };
+      if (opts.mask) {
+        return buildWithMatches(opts, {
+          ...pick(opts, ['from']),
+          ...opts.mask
+        });
+      }
+      return buildWithMatches(opts);
+    });
+    const commitLocation = useStableCallback(async next => {
+      if (navigateTimeoutRef.current) clearTimeout(navigateTimeoutRef.current);
+      const isSameUrl = latestLocationRef.current.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
+                }
+              }
+            }
+          };
+          if (nextHistory.unmaskOnReload ?? options.unmaskOnReload ?? false) {
+            nextHistory.state.__tempKey = tempLocationKeyRef.current;
+          }
+        }
+        history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+      }
+      resetNextScrollRef.current = next.resetScroll ?? true;
+      return latestLoadPromiseRef.current;
+    });
+    const buildAndCommitLocation = useStableCallback(({
+      replace,
+      resetScroll,
+      ...rest
+    } = {}) => {
+      const location = buildLocation(rest);
+      return commitLocation({
+        ...location,
+        replace,
+        resetScroll
+      });
+    });
+    const navigate = useStableCallback(({
+      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 = typeof from === 'undefined' ? from : String(from);
+      let isExternal;
+      try {
+        new URL(`${toString}`);
+        isExternal = true;
+      } catch (e) {}
+      invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
+      return buildAndCommitLocation({
+        ...rest,
+        from: fromString,
+        to: toString
+      });
+    });
+    const loadMatches = useStableCallback(async ({
+      matches,
+      preload
+    }) => {
+      let firstBadMatchIndex;
+
+      // 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 = looseRoutesById[match.routeId];
+          const handleError = (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()
+            };
+          };
+          try {
+            if (match.paramsError) {
+              handleError(match.paramsError, 'PARSE_PARAMS');
+            }
+            if (match.searchError) {
+              handleError(match.searchError, 'VALIDATE_SEARCH');
+            }
+            const parentMeta = parentMatch?.meta ?? options.meta ?? {};
+            const beforeLoadMeta = (await route.options.beforeLoad?.({
+              search: match.search,
+              abortController: match.abortController,
+              params: match.params,
+              preload: !!preload,
+              meta: parentMeta,
+              location: state.location // TODO: This might need to be latestLocationRef.current...?
+            })) ?? {};
+            const meta = {
+              ...parentMeta,
+              ...beforeLoadMeta
+            };
+            matches[index] = match = {
+              ...match,
+              meta: replaceEqualDeep(match.meta, meta)
+            };
+          } catch (err) {
+            handleError(err, 'BEFORE_LOAD');
+            break;
+          }
+        }
+      } catch (err) {
+        if (isRedirect(err)) {
+          if (!preload) navigate(err);
+          return;
+        }
+        throw err;
+      }
+      const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
+      const matchPromises = [];
+      validResolvedMatches.forEach((match, index) => {
+        matchPromises.push((async () => {
+          const parentMatchPromise = matchPromises[index - 1];
+          const route = looseRoutesById[match.routeId];
+          if (match.isFetching) {
+            return getRouteMatch(state, match.id)?.loadPromise;
           }
           const fetchedAt = Date.now();
           const checkLatest = () => {
-            const latest = this.getRouteMatch(match.id);
+            const latest = getRouteMatch(state, match.id);
             return latest && latest.fetchedAt !== fetchedAt ? latest.loadPromise : undefined;
           };
           const handleIfRedirect = err => {
             if (isRedirect(err)) {
-              if (!opts?.preload) {
-                this.navigate(err);
+              if (!preload) {
+                navigate(err);
               }
               return true;
             }
@@ -1534,16 +1544,23 @@
                   await component.preload();
                 }
               }));
-              const loaderPromise = route.options.loader?.({
+              const loaderPromise = route.options.load?.({
                 params: match.params,
-                preload: !!opts?.preload,
+                search: match.search,
+                preload: !!preload,
                 parentMatchPromise,
                 abortController: match.abortController,
-                context: match.context
+                meta: match.meta
               });
-              const [_, loader] = await Promise.all([componentsPromise, loaderPromise]);
+              await Promise.all([componentsPromise, loaderPromise]);
               if (latestPromise = checkLatest()) return await latestPromise;
-              this.setRouteMatchData(match.id, () => loader, opts);
+              matches[index] = match = {
+                ...match,
+                error: undefined,
+                status: 'success',
+                isFetching: false,
+                updatedAt: Date.now()
+              };
             } catch (error) {
               if (latestPromise = checkLatest()) return await latestPromise;
               if (handleIfRedirect(error)) return;
@@ -1553,88 +1570,150 @@
                 error = onErrorError;
                 if (handleIfRedirect(onErrorError)) return;
               }
-              this.setRouteMatch(match.id, s => ({
-                ...s,
+              matches[index] = match = {
+                ...match,
                 error,
                 status: 'error',
                 isFetching: false,
                 updatedAt: Date.now()
-              }));
+              };
             }
           };
           let loadPromise;
-          this.__store.batch(() => {
-            this.setRouteMatch(match.id, s => ({
-              ...s,
-              // status: s.status !== 'success' ? 'pending' : s.status,
-              isFetching: true,
-              fetchedAt,
-              invalid: false
-            }));
-            loadPromise = load();
-            this.setRouteMatch(match.id, s => ({
-              ...s,
-              loadPromise
-            }));
-          });
+          matches[index] = match = {
+            ...match,
+            isFetching: true,
+            fetchedAt,
+            invalid: false
+          };
+          loadPromise = load();
+          matches[index] = match = {
+            ...match,
+            loadPromise
+          };
           await loadPromise;
         })());
       });
       await Promise.all(matchPromises);
-    };
-    resolvePath = (from, path) => {
-      return resolvePath(this.basepath, from, cleanPath(path));
-    };
-    navigate = async ({
-      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
+    });
+    const load = useStableCallback(async opts => {
+      const promise = new Promise(async (resolve, reject) => {
+        const prevLocation = state.resolvedLocation;
+        const pathDidChange = !!(opts?.next && prevLocation.href !== opts.next.href);
+        let latestPromise;
+        const checkLatest = () => {
+          return latestLoadPromiseRef.current !== promise ? latestLoadPromiseRef.current : undefined;
+        };
 
-      // If this `to` is a valid external URL, return
-      // null for LinkUtils
-      const toString = String(to);
-      const fromString = typeof from === 'undefined' ? from : String(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: fromString,
-        to: toString
+        // Cancel any pending matches
+        cancelMatches(state);
+        router.emit({
+          type: 'onBeforeLoad',
+          from: prevLocation,
+          to: opts?.next ?? state.location,
+          pathChanged: pathDidChange
+        });
+        if (opts?.next) {
+          // Ingest the new location
+          setState(s => ({
+            ...s,
+            location: opts.next
+          }));
+        }
+
+        // Match the routes
+        const matches = matchRoutes(state.location.pathname, state.location.search, {
+          throwOnError: opts?.throwOnError,
+          debug: true
+        });
+        setState(s => ({
+          ...s,
+          status: 'pending',
+          matches
+        }));
+        try {
+          // Load the matches
+          try {
+            await loadMatches({
+              matches
+            });
+          } catch (err) {
+            // swallow this error, since we'll display the
+            // errors on the route components
+          }
+
+          // Only apply the latest transition
+          if (latestPromise = checkLatest()) {
+            return latestPromise;
+          }
+
+          // TODO:
+          // const exitingMatchIds = previousMatches.filter(
+          //   (id) => !state.pendingMatches.includes(id),
+          // )
+          // const enteringMatchIds = state.pendingMatches.filter(
+          //   (id) => !previousMatches.includes(id),
+          // )
+          // const stayingMatchIds = previousMatches.filter((id) =>
+          //   state.pendingMatches.includes(id),
+          // )
+
+          setState(s => ({
+            ...s,
+            status: 'idle',
+            resolvedLocation: s.location
+          }));
+
+          // TODO:
+          // ;(
+          //   [
+          //     [exitingMatchIds, 'onLeave'],
+          //     [enteringMatchIds, 'onEnter'],
+          //     [stayingMatchIds, 'onTransition'],
+          //   ] as const
+          // ).forEach(([matches, hook]) => {
+          //   matches.forEach((match) => {
+          //     const route = this.getRoute(match.routeId)
+          //     route.options[hook]?.(match)
+          //   })
+          // })
+          router.emit({
+            type: 'onLoad',
+            from: prevLocation,
+            to: state.location,
+            pathChanged: pathDidChange
+          });
+          resolve();
+        } catch (err) {
+          // Only apply the latest transition
+          if (latestPromise = checkLatest()) {
+            return latestPromise;
+          }
+          reject(err);
+        }
       });
-    };
-    matchRoute = (location, opts) => {
-      location = {
-        ...location,
-        to: location.to ? this.resolvePath(location.from ?? '', location.to) : undefined
-      };
-      const next = this.buildLocation(location);
-      if (opts?.pending && this.state.status !== 'pending') {
-        return false;
-      }
-      const baseLocation = opts?.pending ? this.state.location : this.state.resolvedLocation;
-      if (!baseLocation) {
-        return false;
+      latestLoadPromiseRef.current = promise;
+      return latestLoadPromiseRef.current;
+    });
+    const safeLoad = React__namespace.useCallback(async () => {
+      try {
+        return load();
+      } catch (err) {
+        // Don't do anything
       }
-      const match = matchPathname(this.basepath, baseLocation.pathname, {
-        ...opts,
-        to: next.pathname
+    }, []);
+    const preloadRoute = useStableCallback(async (navigateOpts = state.location) => {
+      let next = buildLocation(navigateOpts);
+      let matches = matchRoutes(next.pathname, next.search, {
+        throwOnError: true
       });
-      if (!match) {
-        return false;
-      }
-      if (opts?.includeSearch ?? true) {
-        return partialDeepEqual(baseLocation.search, next.search) ? match : false;
-      }
-      return match;
-    };
-    buildLink = dest => {
+      await loadMatches({
+        matches,
+        preload: true
+      });
+      return [last(matches), matches];
+    });
+    const buildLink = useStableCallback((state, dest) => {
       // If this link simply reloads the current route,
       // make sure it has a new key so it will trigger a data refresh
 
@@ -1659,18 +1738,18 @@
         };
       } catch (e) {}
       const nextOpts = dest;
-      const next = this.buildLocation(nextOpts);
-      const preload = userPreload ?? this.options.defaultPreload;
-      const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
+      const next = buildLocation(nextOpts);
+      const preload = userPreload ?? options.defaultPreload;
+      const preloadDelay = userPreloadDelay ?? options.defaultPreloadDelay ?? 0;
 
       // Compare path/hash for matches
-      const currentPathSplit = this.state.location.pathname.split('/');
+      const currentPathSplit = latestLocationRef.current.pathname.split('/');
       const nextPathSplit = next.pathname.split('/');
       const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
       // Combine the matches based on user options
-      const pathTest = activeOptions?.exact ? this.state.location.pathname === next.pathname : pathIsFuzzyEqual;
-      const hashTest = activeOptions?.includeHash ? this.state.location.hash === next.hash : true;
-      const searchTest = activeOptions?.includeSearch ?? true ? partialDeepEqual(this.state.location.search, next.search) : true;
+      const pathTest = activeOptions?.exact ? latestLocationRef.current.pathname === next.pathname : pathIsFuzzyEqual;
+      const hashTest = activeOptions?.includeHash ? latestLocationRef.current.hash === next.hash : true;
+      const searchTest = activeOptions?.includeSearch ?? true ? partialDeepEqual(latestLocationRef.current.search, next.search) : true;
 
       // The final "active" test
       const isActive = pathTest && hashTest && searchTest;
@@ -1681,7 +1760,7 @@
           e.preventDefault();
 
           // All is well? Navigate!
-          this.#commitLocation({
+          commitLocation({
             ...next,
             replace,
             resetScroll
@@ -1692,14 +1771,14 @@
       // The click handler
       const handleFocus = e => {
         if (preload) {
-          this.preloadRoute(nextOpts).catch(err => {
+          preloadRoute(nextOpts).catch(err => {
             console.warn(err);
             console.warn(preloadWarning);
           });
         }
       };
       const handleTouchStart = e => {
-        this.preloadRoute(nextOpts).catch(err => {
+        preloadRoute(nextOpts).catch(err => {
           console.warn(err);
           console.warn(preloadWarning);
         });
@@ -1712,7 +1791,7 @@
           }
           target.preloadTimeout = setTimeout(() => {
             target.preloadTimeout = null;
-            this.preloadRoute(nextOpts).catch(err => {
+            preloadRoute(nextOpts).catch(err => {
               console.warn(err);
               console.warn(preloadWarning);
             });
@@ -1737,663 +1816,95 @@
         isActive,
         disabled
       };
-    };
-    dehydrate = () => {
-      return {
-        state: {
-          matchIds: this.state.matchIds,
-          dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'invalid', 'preloadMaxAge', 'maxAge', 'id', 'loaderData', 'status', 'updatedAt']))
-        }
-      };
-    };
-    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__;
-      }
-      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;
+    });
+    const latestLocationRef = React__namespace.useRef(state.location);
+    React__namespace.useLayoutEffect(() => {
+      const unsub = history.subscribe(() => {
+        latestLocationRef.current = parseLocation(latestLocationRef.current);
+        React__namespace.startTransition(() => {
+          setState(s => ({
+            ...s,
+            location: latestLocationRef.current
+          }));
+        });
       });
-      this.__store.setState(s => {
-        return {
-          ...s,
-          matchIds: dehydratedState.matchIds,
-          matches,
-          matchesById: this.#mergeMatches(s.matchesById, matches)
-        };
+      const nextLocation = buildLocation({
+        search: true,
+        params: true,
+        hash: true,
+        state: true
       });
-    };
-    injectedHtml = [];
-    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>`;
+      if (state.location.href !== nextLocation.href) {
+        commitLocation({
+          ...nextLocation,
+          replace: true
         });
-        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;
-    };
-
-    // resolveMatchPromise = (matchId: string, key: string, value: any) => {
-    //   this.state.matches
-    //     .find((d) => d.id === matchId)
-    //     ?.__promisesByKey[key]?.resolve(value)
-    // }
-
-    #processRoutes = routeTree => {
-      this.routeTree = routeTree;
-      this.routesById = {};
-      this.routesByPath = {};
-      this.flatRoutes = [];
-      const recurseRoutes = routes => {
-        routes.forEach((route, i) => {
-          route.init({
-            originalIndex: i,
-            router: this
-          });
-          const existingRoute = this.routesById[route.id];
-          invariant(!existingRoute, `Duplicate routes found with id: ${String(route.id)}`);
-          this.routesById[route.id] = route;
-          if (!route.isRoot && route.path) {
-            const trimmedFullPath = trimPathRight(route.fullPath);
-            if (!this.routesByPath[trimmedFullPath] || route.fullPath.endsWith('/')) {
-              this.routesByPath[trimmedFullPath] = route;
-            }
-          }
-          const children = route.children;
-          if (children?.length) {
-            recurseRoutes(children);
-          }
-        });
-      };
-      recurseRoutes([routeTree]);
-      this.flatRoutes = Object.values(this.routesByPath).map((d, i) => {
-        const trimmed = trimPath(d.fullPath);
-        const parsed = parsePathname(trimmed);
-        while (parsed.length > 1 && parsed[0]?.value === '/') {
-          parsed.shift();
-        }
-        const score = parsed.map(d => {
-          if (d.type === 'param') {
-            return 0.5;
-          }
-          if (d.type === 'wildcard') {
-            return 0.25;
-          }
-          return 1;
-        });
-        return {
-          child: d,
-          trimmed,
-          parsed,
-          index: i,
-          score
-        };
-      }).sort((a, b) => {
-        let isIndex = a.trimmed === '/' ? 1 : b.trimmed === '/' ? -1 : 0;
-        if (isIndex !== 0) return isIndex;
-        const length = Math.min(a.score.length, b.score.length);
-
-        // Sort by length of score
-        if (a.score.length !== b.score.length) {
-          return b.score.length - a.score.length;
-        }
-
-        // Sort by min available score
-        for (let i = 0; i < length; i++) {
-          if (a.score[i] !== b.score[i]) {
-            return b.score[i] - a.score[i];
-          }
-        }
-
-        // Sort by min available parsed value
-        for (let i = 0; i < length; i++) {
-          if (a.parsed[i].value !== b.parsed[i].value) {
-            return a.parsed[i].value > b.parsed[i].value ? 1 : -1;
-          }
-        }
-
-        // Sort by length of trimmed full path
-        if (a.trimmed !== b.trimmed) {
-          return a.trimmed > b.trimmed ? 1 : -1;
-        }
-
-        // Sort by original index
-        return a.index - b.index;
-      }).map((d, i) => {
-        d.child.rank = i;
-        return d.child;
-      });
-    };
-    #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;
-    };
-    buildLocation = (opts = {}) => {
-      const build = (dest = {}, matches) => {
-        const from = this.state.location;
-        const fromPathname = dest.from ?? from.pathname;
-        let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? ''}`);
-        const fromMatches = this.matchRoutes(fromPathname, from.search);
-        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.getRoute(d.routeId).options.stringifyParams).filter(Boolean).forEach(fn => {
-            nextParams = {
-              ...nextParams,
-              ...fn(nextParams)
-            };
-          });
-        }
-        pathname = interpolatePath(pathname, nextParams ?? {});
-        const preSearchFilters = stayingMatches?.map(match => this.getRoute(match.routeId).options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
-        const postSearchFilters = stayingMatches?.map(match => this.getRoute(match.routeId).options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
-
-        // Pre filters first
-        const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), from.search) : from.search;
-
-        // Then the link/navigate function
-        const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-        : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
-        : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
-        : {};
-
-        // Then post filters
-        const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-        const search = replaceEqualDeep(from.search, postFilteredSearch);
-        const searchStr = this.options.stringifySearch(search);
-        const hash = dest.hash === true ? from.hash : dest.hash ? functionalUpdate(dest.hash, from.hash) : from.hash;
-        const hashStr = hash ? `#${hash}` : '';
-        let nextState = dest.state === true ? from.state : dest.state ? functionalUpdate(dest.state, from.state) : from.state;
-        nextState = replaceEqualDeep(from.state, nextState);
-        return {
-          pathname,
-          search,
-          searchStr,
-          state: nextState,
-          hash,
-          href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
-          unmaskOnReload: dest.unmaskOnReload
-        };
-      };
-      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,
-              fuzzy: false
-            });
-            if (match) {
-              params = match;
-              return true;
-            }
-            return false;
-          });
-          if (foundMask) {
-            foundMask = {
-              ...foundMask,
-              from: interpolatePath(foundMask.from, params)
-            };
-            maskedDest = foundMask;
-            maskedNext = build(maskedDest);
-          }
-        }
-        const nextMatches = this.matchRoutes(next.pathname, next.search);
-        const maskedMatches = maskedNext ? this.matchRoutes(maskedNext.pathname, maskedNext.search) : undefined;
-        const maskedFinal = maskedNext ? build(maskedDest, maskedMatches) : undefined;
-        const final = build(dest, nextMatches);
-        if (maskedFinal) {
-          final.maskedLocation = maskedFinal;
-        }
-        return final;
-      };
-      if (opts.mask) {
-        return buildWithMatches(opts, {
-          ...pick(opts, ['from']),
-          ...opts.mask
-        });
-      }
-      return buildWithMatches(opts);
-    };
-    #buildAndCommitLocation = ({
-      replace,
-      resetScroll,
-      ...rest
-    } = {}) => {
-      const location = this.buildLocation(rest);
-      return this.#commitLocation({
-        ...location,
-        replace,
-        resetScroll
-      });
-    };
-    #commitLocation = async next => {
-      if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
-      const isSameUrl = this.state.location.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
-                }
-              }
-            }
-          };
-          if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
-            nextHistory.state.__tempKey = this.tempLocationKey;
-          }
-        }
-        this.history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
-      }
-      this.resetNextScroll = next.resetScroll ?? true;
-      return this.latestLoadPromise;
-    };
-    getRouteMatch = id => {
-      return this.state.matchesById[id];
-    };
-    setRouteMatch = (id, updater) => {
-      this.__store.setState(prev => {
-        if (!prev.matchesById[id]) {
-          return prev;
-        }
-        return {
-          ...prev,
-          matchesById: {
-            ...prev.matchesById,
-            [id]: updater(prev.matchesById[id])
-          }
-        };
-      });
-    };
-    setRouteMatchData = (id, updater, opts) => {
-      const match = this.getRouteMatch(id);
-      if (!match) return;
-      const route = this.getRoute(match.routeId);
-      const updatedAt = opts?.updatedAt ?? Date.now();
-      const preloadMaxAge = opts?.maxAge ?? route.options.preloadMaxAge ?? this.options.defaultPreloadMaxAge ?? 5000;
-      const maxAge = opts?.maxAge ?? route.options.maxAge ?? this.options.defaultMaxAge ?? -1;
-      this.setRouteMatch(id, s => ({
-        ...s,
-        error: undefined,
-        status: 'success',
-        isFetching: false,
-        updatedAt: updatedAt,
-        loaderData: functionalUpdate(updater, s.loaderData),
-        preloadMaxAge,
-        maxAge
-      }));
-    };
-    invalidate = async opts => {
-      if (opts?.matchId) {
-        this.setRouteMatch(opts.matchId, s => ({
-          ...s,
-          invalid: true
-        }));
-        const matchIndex = this.state.matches.findIndex(d => d.id === opts.matchId);
-        const childMatch = this.state.matches[matchIndex + 1];
-        if (childMatch) {
-          return this.invalidate({
-            matchId: childMatch.id,
-            reload: false,
-            __fromFocus: opts.__fromFocus
-          });
-        }
-      } else {
-        this.__store.batch(() => {
-          Object.values(this.state.matchesById).forEach(match => {
-            const route = this.getRoute(match.routeId);
-            const shouldInvalidate = opts?.__fromFocus ? route.options.reloadOnWindowFocus ?? true : true;
-            if (shouldInvalidate) {
-              this.setRouteMatch(match.id, s => ({
-                ...s,
-                invalid: true
-              }));
-            }
-          });
-        });
-      }
-      if (opts?.reload ?? true) {
-        return this.load();
-      }
-    };
-  }
-
-  // Detect if we're in the DOM
-  const isServer = typeof window === 'undefined' || !window.document.createElement;
-  function getInitialRouterState() {
-    return {
-      status: 'idle',
-      isFetching: false,
-      resolvedLocation: null,
-      location: null,
-      matchesById: {},
-      matchIds: [],
-      pendingMatchIds: [],
-      matches: [],
-      pendingMatches: [],
-      renderedMatchIds: [],
-      renderedMatches: [],
-      lastUpdated: Date.now()
-    };
-  }
-  function isCtrlEvent(e) {
-    return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-  }
-  function redirect(opts) {
-    opts.isRedirect = true;
-    return opts;
-  }
-  function isRedirect(obj) {
-    return !!obj?.isRedirect;
-  }
-  class SearchParamError extends Error {}
-  class PathParamError extends Error {}
-  function escapeJSON(jsonString) {
-    return jsonString.replace(/\\/g, '\\\\') // Escape backslashes
-    .replace(/'/g, "\\'") // Escape single quotes
-    .replace(/"/g, '\\"'); // Escape double quotes
-  }
-
-  // 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);
-    };
-  }
-  function isMatchInvalid(match, opts) {
-    const now = Date.now();
-    if (match.invalid) {
-      return true;
-    }
-    if (opts?.preload) {
-      return match.preloadMaxAge < 0 ? false : match.updatedAt + match.preloadMaxAge < now;
-    }
-    return match.maxAge < 0 ? false : match.updatedAt + match.maxAge < now;
-  }
-
-  const windowKey = 'window';
-  const delimiter = '___';
-  let weakScrolledElementsByRestoreKey = {};
-  let cache;
-  let pathDidChange = false;
-  const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
-  const defaultGetKey = location => location.state.key;
-  function watchScrollPositions(router, opts) {
-    const getKey = opts?.getKey || defaultGetKey;
-    if (sessionsStorage) {
-      if (!cache) {
-        cache = (() => {
-          const storageKey = 'tsr-scroll-restoration-v1';
-          const current = JSON.parse(window.sessionStorage.getItem(storageKey) || '{}');
-          return {
-            current,
-            set: (key, value) => {
-              current[key] = value;
-              window.sessionStorage.setItem(storageKey, JSON.stringify(cache));
-            }
-          };
-        })();
-      }
-    }
-    const {
-      history
-    } = window;
-    if (history.scrollRestoration) {
-      history.scrollRestoration = 'manual';
-    }
-    const onScroll = event => {
-      const restoreKey = getKey(router.state.resolvedLocation);
-      if (!weakScrolledElementsByRestoreKey[restoreKey]) {
-        weakScrolledElementsByRestoreKey[restoreKey] = new WeakSet();
-      }
-      const set = weakScrolledElementsByRestoreKey[restoreKey];
-      if (set.has(event.target)) return;
-      set.add(event.target);
-      const cacheKey = [restoreKey, event.target === document || event.target === window ? windowKey : getCssSelector(event.target)].join(delimiter);
-      if (!cache.current[cacheKey]) {
-        cache.set(cacheKey, {
-          scrollX: NaN,
-          scrollY: NaN
-        });
-      }
-    };
-    const getCssSelector = el => {
-      let path = [],
-        parent;
-      while (parent = el.parentNode) {
-        path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`);
-        el = parent;
-      }
-      return `${path.join(' > ')}`.toLowerCase();
-    };
-    const onPathWillChange = from => {
-      const restoreKey = getKey(from);
-      for (const cacheKey in cache.current) {
-        const entry = cache.current[cacheKey];
-        const [key, elementSelector] = cacheKey.split(delimiter);
-        if (restoreKey === key) {
-          if (elementSelector === windowKey) {
-            entry.scrollX = window.scrollX || 0;
-            entry.scrollY = window.scrollY || 0;
-          } else if (elementSelector) {
-            const element = document.querySelector(elementSelector);
-            entry.scrollX = element?.scrollLeft || 0;
-            entry.scrollY = element?.scrollTop || 0;
-          }
-          cache.set(cacheKey, entry);
-        }
-      }
-    };
-    const onPathChange = () => {
-      pathDidChange = true;
-    };
-    if (typeof document !== 'undefined') {
-      document.addEventListener('scroll', onScroll, true);
-    }
-    const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', event => {
-      if (event.pathChanged) onPathWillChange(event.from);
-    });
-    const unsubOnLoad = router.subscribe('onLoad', event => {
-      if (event.pathChanged) onPathChange();
-    });
-    return () => {
-      document.removeEventListener('scroll', onScroll);
-      unsubOnBeforeLoad();
-      unsubOnLoad();
-    };
-  }
-  function restoreScrollPositions(router, opts) {
-    if (pathDidChange) {
-      if (!router.resetNextScroll) {
-        return;
-      }
-      const getKey = opts?.getKey || defaultGetKey;
-      pathDidChange = false;
-      const restoreKey = getKey(router.state.location);
-      let windowRestored = false;
-      for (const cacheKey in cache.current) {
-        const entry = cache.current[cacheKey];
-        const [key, elementSelector] = cacheKey.split(delimiter);
-        if (key === restoreKey) {
-          if (elementSelector === windowKey) {
-            windowRestored = true;
-            window.scrollTo(entry.scrollX, entry.scrollY);
-          } else if (elementSelector) {
-            const element = document.querySelector(elementSelector);
-            if (element) {
-              element.scrollLeft = entry.scrollX;
-              element.scrollTop = entry.scrollY;
-            }
-          }
-        }
-      }
-      if (!windowRestored) {
-        window.scrollTo(0, 0);
       }
+      return () => {
+        unsub();
+      };
+    }, [history]);
+    const initialLoad = React__namespace.useRef(true);
+    if (initialLoad.current) {
+      initialLoad.current = false;
+      safeLoad();
     }
-  }
-
-  function defer(_promise) {
-    const promise = _promise;
-    if (!promise.__deferredState) {
-      promise.__deferredState = {
-        uid: Math.random().toString(36).slice(2),
-        status: 'pending'
+    React__namespace.useLayoutEffect(() => {
+      if (state.resolvedLocation !== state.location) {
+        safeLoad();
+      }
+    }, [state.location]);
+    React__namespace.useMemo(() => [...state.matches, ...state.pendingMatches].some(d => d.isFetching), [state.matches, state.pendingMatches]);
+    const matchRoute = useStableCallback((state, location, opts) => {
+      location = {
+        ...location,
+        to: location.to ? resolvePathWithBase(location.from || '', location.to) : undefined
       };
-      const state = promise.__deferredState;
-      promise.then(data => {
-        state.status = 'success';
-        state.data = data;
-      }).catch(error => {
-        state.status = 'error';
-        state.error = error;
+      const next = buildLocation(location);
+      if (opts?.pending && state.status !== 'pending') {
+        return false;
+      }
+      const baseLocation = opts?.pending ? latestLocationRef.current : state.resolvedLocation;
+      if (!baseLocation) {
+        return false;
+      }
+      const match = matchPathname(basepath, baseLocation.pathname, {
+        ...opts,
+        to: next.pathname
       });
-    }
-    return promise;
-  }
-  function isDehydratedDeferred(obj) {
-    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
-  }
-
-  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];
-          }
-        }
+      if (!match) {
+        return false;
       }
-      return target;
+      if (opts?.includeSearch ?? true) {
+        return partialDeepEqual(baseLocation.search, next.search) ? match : false;
+      }
+      return match;
+    });
+    const routerContextValue = {
+      routeTree: router.routeTree,
+      navigate,
+      buildLink,
+      state,
+      matchRoute,
+      routesById,
+      options,
+      history,
+      load
     };
-    return _extends.apply(this, arguments);
+    return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
+      value: routerContextValue
+    }, /*#__PURE__*/React__namespace.createElement(Matches, null));
+  }
+  function isCtrlEvent(e) {
+    return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+  }
+  class SearchParamError extends Error {}
+  class PathParamError extends Error {}
+  function getRouteMatch(state, id) {
+    return [...state.pendingMatches, ...state.matches].find(d => d.id === id);
   }
 
-  const useLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-  Route.__onInit = route => {
-    Object.assign(route, {
-      useMatch: (opts = {}) => {
-        return useMatch({
-          ...opts,
-          from: route.id
-        });
-      },
-      useLoader: (opts = {}) => {
-        return useLoader({
-          ...opts,
-          from: route.id
-        });
-      },
-      useRouteContext: (opts = {}) => {
-        return useMatch({
-          ...opts,
-          from: route.id,
-          select: d => opts?.select ? opts.select(d.context) : d.context
-        });
-      },
-      useSearch: (opts = {}) => {
-        return useSearch({
-          ...opts,
-          from: route.id
-        });
-      },
-      useParams: (opts = {}) => {
-        return useParams({
-          ...opts,
-          from: route.id
-        });
-      }
-    });
-  };
+  const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 
   //
 
@@ -2418,7 +1929,10 @@
   //
 
   function useLinkProps(options) {
-    const router = useRouter();
+    const {
+      buildLink,
+      state: routerState
+    } = useRouter();
     const match = useMatch({
       strict: false
     });
@@ -2452,7 +1966,7 @@
       onTouchStart,
       ...rest
     } = options;
-    const linkInfo = router.buildLink({
+    const linkInfo = buildLink(routerState, {
       from: options.to ? match.pathname : undefined,
       ...options
     });
@@ -2528,92 +2042,48 @@
     }));
   });
   function Navigate(props) {
-    const router = useRouter();
+    const {
+      navigate
+    } = useRouter();
     const match = useMatch({
       strict: false
     });
-    useLayoutEffect$1(() => {
-      router.navigate({
+    useLayoutEffect(() => {
+      navigate({
         from: props.to ? match.pathname : undefined,
         ...props
       });
     }, []);
     return null;
   }
-  const matchIdsContext = /*#__PURE__*/React__namespace.createContext(null);
-  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
-  function useRouterState(opts) {
-    const router = useRouter();
-    return useStore(router.__store, opts?.select);
-  }
-  function RouterProvider({
-    router,
-    ...rest
-  }) {
-    router.update(rest);
-    React__namespace.useEffect(() => {
-      let unsub;
-      React__namespace.startTransition(() => {
-        unsub = router.mount();
-      });
-      return unsub;
-    }, [router]);
-    const Wrap = router.options.Wrap || React__namespace.Fragment;
-    return /*#__PURE__*/React__namespace.createElement(Wrap, null, /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
-      value: router
-    }, /*#__PURE__*/React__namespace.createElement(Matches, null)));
-  }
-  function Matches() {
-    const router = useRouter();
-    const matchIds = useRouterState({
-      select: state => {
-        return state.renderedMatchIds;
-      }
-    });
-    const locationKey = useRouterState({
-      select: d => d.resolvedLocation.state?.key
-    });
-    const route = router.getRoute(rootRouteId);
-    const errorComponent = React__namespace.useCallback(props => {
-      return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
-        ...props,
-        useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams
-      });
-    }, [route]);
-    return /*#__PURE__*/React__namespace.createElement(matchIdsContext.Provider, {
-      value: [undefined, ...matchIds]
-    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      resetKey: locationKey,
-      errorComponent: errorComponent,
-      onCatch: () => {
-        warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
-      }
-    }, /*#__PURE__*/React__namespace.createElement(Outlet, null)));
-  }
+  const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
   function useRouter() {
     const value = React__namespace.useContext(routerContext);
-    warning(value, 'useRouter must be used inside a <Router> component!');
+    warning(value, 'useRouter must be used inside a <RouterProvider> component!');
     return value;
   }
+  function useRouterState(opts) {
+    const {
+      state
+    } = useRouter();
+    // return useStore(router.__store, opts?.select as any)
+    return opts?.select ? opts.select(state) : state;
+  }
   function useMatches(opts) {
-    const matchIds = React__namespace.useContext(matchIdsContext);
+    const contextMatches = React__namespace.useContext(matchesContext);
     return useRouterState({
       select: state => {
-        const matches = state.renderedMatches.slice(state.renderedMatches.findIndex(d => d.id === matchIds[0]));
+        const matches = state.matches.slice(state.matches.findIndex(d => d.id === contextMatches[0]?.id));
         return opts?.select ? opts.select(matches) : matches;
       }
     });
   }
   function useMatch(opts) {
-    const router = useRouter();
-    const nearestMatchId = React__namespace.useContext(matchIdsContext)[0];
-    const nearestMatchRouteId = router.getRouteMatch(nearestMatchId)?.routeId;
+    const nearestMatch = React__namespace.useContext(matchesContext)[0];
+    const nearestMatchRouteId = nearestMatch?.routeId;
     const matchRouteId = useRouterState({
       select: state => {
-        const match = opts?.from ? state.renderedMatches.find(d => d.routeId === opts?.from) : state.renderedMatches.find(d => d.id === nearestMatchId);
+        const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
         return match.routeId;
       }
     });
@@ -2622,29 +2092,17 @@
     }
     const matchSelection = useRouterState({
       select: state => {
-        const match = opts?.from ? state.renderedMatches.find(d => d.routeId === opts?.from) : state.renderedMatches.find(d => d.id === nearestMatchId);
+        const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
         invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
         return opts?.select ? opts.select(match) : match;
       }
     });
     return matchSelection;
   }
-  function useLoader(opts) {
-    return useMatch({
-      ...opts,
-      select: match => opts?.select ? opts?.select(match.loaderData) : match.loaderData
-    });
-  }
-  function useRouterContext(opts) {
-    return useMatch({
-      ...opts,
-      select: match => opts?.select ? opts.select(match.context) : match.context
-    });
-  }
-  function useRouteContext(opts) {
+  function useRouteMeta(opts) {
     return useMatch({
       ...opts,
-      select: match => opts?.select ? opts.select(match.context) : match.context
+      select: match => opts?.select ? opts.select(match.meta) : match.meta
     });
   }
   function useSearch(opts) {
@@ -2658,18 +2116,20 @@
   function useParams(opts) {
     return useRouterState({
       select: state => {
-        const params = last(state.renderedMatches)?.params;
+        const params = last(state.matches)?.params;
         return opts?.select ? opts.select(params) : params;
       }
     });
   }
   function useNavigate(defaultOpts) {
-    const router = useRouter();
+    const {
+      navigate
+    } = useRouter();
     const match = useMatch({
       strict: false
     });
     return React__namespace.useCallback(opts => {
-      return router.navigate({
+      return navigate({
         from: opts?.to ? match.pathname : undefined,
         ...defaultOpts,
         ...opts
@@ -2677,19 +2137,62 @@
     }, []);
   }
   function useMatchRoute() {
-    const router = useRouter();
+    const {
+      state,
+      matchRoute
+    } = useRouter();
     return React__namespace.useCallback(opts => {
       const {
         pending,
         caseSensitive,
         ...rest
       } = opts;
-      return router.matchRoute(rest, {
+      return matchRoute(state, rest, {
         pending,
         caseSensitive
       });
     }, []);
   }
+  function Matches() {
+    const {
+      routesById,
+      state
+    } = useRouter();
+
+    // const matches = useRouterState({
+    //   select: (state) => {
+    //     return state.matches
+    //   },
+    // })
+
+    const {
+      matches
+    } = state;
+    const locationKey = useRouterState({
+      select: d => d.resolvedLocation.state?.key
+    });
+    const route = routesById[rootRouteId];
+    const errorComponent = React__namespace.useCallback(props => {
+      return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
+        ...props,
+        useMatch: route.useMatch,
+        useRouteMeta: route.useRouteMeta,
+        useSearch: route.useSearch,
+        useParams: route.useParams
+      });
+    }, [route]);
+    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
+      value: matches
+    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+      resetKey: locationKey,
+      errorComponent: errorComponent,
+      onCatch: () => {
+        warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
+      }
+    }, matches.length ? /*#__PURE__*/React__namespace.createElement(Match, {
+      matches: matches
+    }) : null));
+  }
   function MatchRoute(props) {
     const matchRoute = useMatchRoute();
     const params = matchRoute(props);
@@ -2699,44 +2202,47 @@
     return !!params ? props.children : null;
   }
   function Outlet() {
-    const matchIds = React__namespace.useContext(matchIdsContext).slice(1);
-    if (!matchIds[0]) {
+    const matches = React__namespace.useContext(matchesContext).slice(1);
+    if (!matches[0]) {
       return null;
     }
     return /*#__PURE__*/React__namespace.createElement(Match, {
-      matchIds: matchIds
+      matches: matches
     });
   }
   const defaultPending = () => null;
   function Match({
-    matchIds
+    matches
   }) {
-    const router = useRouter();
-    const matchId = matchIds[0];
-    const routeId = router.getRouteMatch(matchId).routeId;
-    const route = router.getRoute(routeId);
+    const {
+      options,
+      routesById
+    } = useRouter();
+    const match = matches[0];
+    const routeId = match?.routeId;
+    const route = routesById[routeId];
     const locationKey = useRouterState({
       select: s => s.resolvedLocation.state?.key
     });
-    const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
-    const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
+    const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent ?? defaultPending;
+    const routeErrorComponent = route.options.errorComponent ?? options.defaultErrorComponent ?? ErrorComponent;
     const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? !route.isRoot ? React__namespace.Suspense : SafeFragment;
     const ResolvedCatchBoundary = !!routeErrorComponent ? CatchBoundary : SafeFragment;
     const errorComponent = React__namespace.useCallback(props => {
       return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
         ...props,
         useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
+        useRouteMeta: route.useRouteMeta,
         useSearch: route.useSearch,
         useParams: route.useParams
       });
     }, [route]);
-    return /*#__PURE__*/React__namespace.createElement(matchIdsContext.Provider, {
-      value: matchIds
+    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
+      value: matches
     }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
       fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, {
         useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
+        useRouteMeta: route.useRouteMeta,
         useSearch: route.useSearch,
         useParams: route.useParams
       })
@@ -2744,44 +2250,32 @@
       resetKey: locationKey,
       errorComponent: errorComponent,
       onCatch: () => {
-        warning(false, `Error in route match: ${matchId}`);
+        warning(false, `Error in route match: ${match.id}`);
       }
     }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
-      matchId: matchId,
-      PendingComponent: PendingComponent
+      match: match
     }))));
   }
   function MatchInner({
-    matchId,
-    PendingComponent
+    match
   }) {
-    const router = useRouter();
-    const match = useRouterState({
-      select: d => {
-        const match = d.matchesById[matchId];
-        return pick(match, ['status', 'loadPromise', 'routeId', 'error']);
-      }
-    });
-    const route = router.getRoute(match.routeId);
+    const {
+      options,
+      routesById
+    } = useRouter();
+    const route = routesById[match.routeId];
     if (match.status === 'error') {
       throw match.error;
     }
     if (match.status === 'pending') {
-      return /*#__PURE__*/React__namespace.createElement(PendingComponent, {
-        useLoader: route.useLoader,
-        useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams
-      });
+      throw match.loadPromise;
     }
     if (match.status === 'success') {
-      let comp = route.options.component ?? router.options.defaultComponent;
+      let comp = route.options.component ?? options.defaultComponent;
       if (comp) {
         return /*#__PURE__*/React__namespace.createElement(comp, {
-          useLoader: route.useLoader,
           useMatch: route.useMatch,
-          useRouteContext: route.useRouteContext,
+          useRouteMeta: route.useRouteMeta,
           useSearch: route.useSearch,
           useParams: route.useParams
         });
@@ -2793,24 +2287,37 @@
   function SafeFragment(props) {
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
   }
-  function useInjectHtml() {
-    const router = useRouter();
-    return React__namespace.useCallback(html => {
-      router.injectHtml(html);
-    }, []);
-  }
-  function useDehydrate() {
-    const router = useRouter();
-    return React__namespace.useCallback(function dehydrate(key, data) {
-      return router.dehydrateData(key, data);
-    }, []);
-  }
-  function useHydrate() {
-    const router = useRouter();
-    return function hydrate(key) {
-      return router.hydrateData(key);
-    };
-  }
+
+  // export function useInjectHtml() {
+  //   const { } = useRouter()
+
+  //   return React.useCallback(
+  //     (html: string | (() => Promise<string> | string)) => {
+  //       router.injectHtml(html)
+  //     },
+  //     [],
+  //   )
+  // }
+
+  // export function useDehydrate() {
+  //   const { } = useRouter()
+
+  //   return React.useCallback(function dehydrate<T>(
+  //     key: any,
+  //     data: T | (() => Promise<T> | T),
+  //   ) {
+  //     return router.dehydrateData(key, data)
+  //   },
+  //   [])
+  // }
+
+  // export function useHydrate() {
+  //   const { } = useRouter()
+
+  //   return function hydrate<T = unknown>(key: any) {
+  //     return router.hydrateData(key) as T
+  //   }
+  // }
 
   // This is the messiest thing ever... I'm either seriously tired (likely) or
   // there has to be a better way to reset error boundaries when the
@@ -2901,10 +2408,12 @@
     }, error.message ? /*#__PURE__*/React__namespace.createElement("code", null, error.message) : null)) : null);
   }
   function useBlocker(message, condition = true) {
-    const router = useRouter();
+    const {
+      history
+    } = useRouter();
     React__namespace.useEffect(() => {
       if (!condition) return;
-      let unblock = router.history.block((retry, cancel) => {
+      let unblock = history.block((retry, cancel) => {
         if (window.confirm(message)) {
           unblock();
           retry();
@@ -2940,47 +2449,125 @@
     return true;
   }
 
-  const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-  function useScrollRestoration(options) {
-    const router = useRouter();
-    useLayoutEffect(() => {
-      return watchScrollPositions(router, options);
-    }, []);
-    useLayoutEffect(() => {
-      restoreScrollPositions(router, options);
-    });
-  }
-  function ScrollRestoration(props) {
-    useScrollRestoration(props);
-    return null;
-  }
+  const rootRouteId = '__root__';
 
-  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;
+  // export type MetaOptions = keyof PickRequired<RouteMeta> extends never
+  //   ? {
+  //       meta?: RouteMeta
+  //     }
+  //   : {
+  //       meta: RouteMeta
+  //     }
+  // The parse type here allows a zod schema to be passed directly to the validator
+  class Route {
+    // Set up in this.init()
+
+    // customId!: TCustomId
+
+    // Optional
+
+    constructor(options) {
+      this.options = options || {};
+      this.isRoot = !options?.getParentRoute;
+      Route.__onInit(this);
     }
-    if (state.status === 'error') {
-      throw state.error;
+    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;
+    };
+    update = options => {
+      Object.assign(this.options, options);
+      return this;
+    };
+    static __onInit = route => {
+      // This is a dummy static method that should get
+      // replaced by a framework specific implementation if necessary
+    };
+    useMatch = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id
+      });
+    };
+    useRouteMeta = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id,
+        select: d => opts?.select ? opts.select(d.meta) : d.meta
+      });
+    };
+    useSearch = opts => {
+      return useSearch({
+        ...opts,
+        from: this.id
+      });
+    };
+    useParams = opts => {
+      return useParams({
+        ...opts,
+        from: this.id
+      });
+    };
+  }
+  class RouterMeta {
+    constructor() {}
+    createRootRoute = options => {
+      return new RootRoute(options);
+    };
+  }
+  class RootRoute extends Route {
+    constructor(options) {
+      super(options);
     }
-    router.dehydrateData(key, state);
-    return [state.data];
   }
-  function Await(props) {
-    const awaited = useAwaited(props);
-    return props.children(...awaited);
+  function createRouteMask(opts) {
+    return opts;
+  }
+
+  class FileRoute {
+    constructor(path) {
+      this.path = path;
+    }
+    createRoute = options => {
+      const route = new Route(options);
+      route.isRoot = false;
+      return route;
+    };
   }
 
-  exports.Await = Await;
   exports.Block = Block;
   exports.CatchBoundary = CatchBoundary;
   exports.CatchBoundaryImpl = CatchBoundaryImpl;
@@ -2988,15 +2575,15 @@
   exports.FileRoute = FileRoute;
   exports.Link = Link;
   exports.MatchRoute = MatchRoute;
+  exports.Matches = Matches;
   exports.Navigate = Navigate;
   exports.Outlet = Outlet;
   exports.PathParamError = PathParamError;
   exports.RootRoute = RootRoute;
   exports.Route = Route;
   exports.Router = Router;
-  exports.RouterContext = RouterContext;
+  exports.RouterMeta = RouterMeta;
   exports.RouterProvider = RouterProvider;
-  exports.ScrollRestoration = ScrollRestoration;
   exports.SearchParamError = SearchParamError;
   exports.cleanPath = cleanPath;
   exports.componentTypes = componentTypes;
@@ -3007,22 +2594,22 @@
   exports.decode = decode;
   exports.defaultParseSearch = defaultParseSearch;
   exports.defaultStringifySearch = defaultStringifySearch;
-  exports.defer = defer;
   exports.encode = encode;
   exports.functionalUpdate = functionalUpdate;
+  exports.getInitialRouterState = getInitialRouterState;
+  exports.getRouteMatch = getRouteMatch;
   exports.interpolatePath = interpolatePath;
   exports.invariant = invariant;
-  exports.isDehydratedDeferred = isDehydratedDeferred;
-  exports.isMatchInvalid = isMatchInvalid;
   exports.isPlainObject = isPlainObject;
   exports.isRedirect = isRedirect;
+  exports.isServer = isServer;
   exports.joinPaths = joinPaths;
   exports.last = last;
   exports.lazyFn = lazyFn;
   exports.lazyRouteComponent = lazyRouteComponent;
   exports.matchByPath = matchByPath;
-  exports.matchIdsContext = matchIdsContext;
   exports.matchPathname = matchPathname;
+  exports.matchesContext = matchesContext;
   exports.parsePathname = parsePathname;
   exports.parseSearchWith = parseSearchWith;
   exports.partialDeepEqual = partialDeepEqual;
@@ -3030,7 +2617,6 @@
   exports.redirect = redirect;
   exports.replaceEqualDeep = replaceEqualDeep;
   exports.resolvePath = resolvePath;
-  exports.restoreScrollPositions = restoreScrollPositions;
   exports.rootRouteId = rootRouteId;
   exports.routerContext = routerContext;
   exports.shallow = shallow;
@@ -3038,27 +2624,19 @@
   exports.trimPath = trimPath;
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
-  exports.useAwaited = useAwaited;
   exports.useBlocker = useBlocker;
-  exports.useDehydrate = useDehydrate;
-  exports.useHydrate = useHydrate;
-  exports.useInjectHtml = useInjectHtml;
   exports.useLinkProps = useLinkProps;
-  exports.useLoader = useLoader;
   exports.useMatch = useMatch;
   exports.useMatchRoute = useMatchRoute;
   exports.useMatches = useMatches;
   exports.useNavigate = useNavigate;
   exports.useParams = useParams;
-  exports.useRouteContext = useRouteContext;
+  exports.useRouteMeta = useRouteMeta;
   exports.useRouter = useRouter;
-  exports.useRouterContext = useRouterContext;
   exports.useRouterState = useRouterState;
-  exports.useScrollRestoration = useScrollRestoration;
   exports.useSearch = useSearch;
-  exports.useStore = useStore;
+  exports.useStableCallback = useStableCallback;
   exports.warning = warning;
-  exports.watchScrollPositions = watchScrollPositions;
 
   Object.defineProperty(exports, '__esModule', { value: true });