@tanstack/router-core 0.0.1-beta.194 → 0.0.1-beta.196

package/build/umd/index.development.js

@@ -9,2251 +9,2334 @@
  * @license MIT
  */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.RouterCore = {}));
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.RouterCore = {}));
 })(this, (function (exports) { 'use strict';
 
-    var prefix = 'Invariant failed';
-    function invariant(condition, message) {
-        if (condition) {
-            return;
-        }
-        var provided = typeof message === 'function' ? message() : message;
-        var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
-        throw new Error(value);
-    }
-
-    function warning(condition, message) {
-      {
-        if (condition) {
-          return;
-        }
-
-        var text = "Warning: " + message;
-
-        if (typeof console !== 'undefined') {
-          console.warn(text);
-        }
-
-        try {
-          throw Error(text);
-        } catch (x) {}
+  /**
+   * @tanstack/history/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
+   */
+  // While the public API was clearly inspired by the "history" npm package,
+  // This implementation attempts to be more lightweight by
+  // making assumptions about the way TanStack Router works
+
+  const pushStateEvent = 'pushstate';
+  const popStateEvent = 'popstate';
+  const beforeUnloadEvent = 'beforeunload';
+  const beforeUnloadListener = event => {
+    event.preventDefault();
+    // @ts-ignore
+    return event.returnValue = '';
+  };
+  const stopBlocking = () => {
+    removeEventListener(beforeUnloadEvent, beforeUnloadListener, {
+      capture: true
+    });
+  };
+  function createHistory(opts) {
+    let location = opts.getLocation();
+    let unsub = () => {};
+    let subscribers = new Set();
+    let blockers = [];
+    let queue = [];
+    const tryFlush = () => {
+      if (blockers.length) {
+        blockers[0]?.(tryFlush, () => {
+          blockers = [];
+          stopBlocking();
+        });
+        return;
+      }
+      while (queue.length) {
+        queue.shift()?.();
+      }
+      if (!opts.subscriber) {
+        onUpdate();
       }
-    }
-
-    // While the public API was clearly inspired by the "history" npm package,
-    // This implementation attempts to be more lightweight by
-    // making assumptions about the way TanStack Router works
-
-    const pushStateEvent = 'pushstate';
-    const popStateEvent = 'popstate';
-    const beforeUnloadEvent = 'beforeunload';
-    const beforeUnloadListener = event => {
-      event.preventDefault();
-      // @ts-ignore
-      return event.returnValue = '';
     };
-    const stopBlocking = () => {
-      removeEventListener(beforeUnloadEvent, beforeUnloadListener, {
-        capture: true
-      });
+    const queueTask = task => {
+      queue.push(task);
+      tryFlush();
     };
-    function createHistory(opts) {
-      let location = opts.getLocation();
-      let unsub = () => {};
-      let subscribers = new Set();
-      let blockers = [];
-      let queue = [];
-      const tryFlush = () => {
-        if (blockers.length) {
-          blockers[0]?.(tryFlush, () => {
-            blockers = [];
-            stopBlocking();
-          });
-          return;
-        }
-        while (queue.length) {
-          queue.shift()?.();
-        }
-        if (!opts.subscriber) {
-          onUpdate();
+    const onUpdate = () => {
+      location = opts.getLocation();
+      subscribers.forEach(subscriber => subscriber());
+    };
+    return {
+      get location() {
+        return location;
+      },
+      subscribe: cb => {
+        if (subscribers.size === 0) {
+          unsub = typeof opts.subscriber === 'function' ? opts.subscriber(onUpdate) : () => {};
         }
-      };
-      const queueTask = task => {
-        queue.push(task);
-        tryFlush();
-      };
-      const onUpdate = () => {
-        location = opts.getLocation();
-        subscribers.forEach(subscriber => subscriber());
-      };
-      return {
-        get location() {
-          return location;
-        },
-        subscribe: cb => {
+        subscribers.add(cb);
+        return () => {
+          subscribers.delete(cb);
           if (subscribers.size === 0) {
-            unsub = typeof opts.subscriber === 'function' ? opts.subscriber(onUpdate) : () => {};
+            unsub();
           }
-          subscribers.add(cb);
-          return () => {
-            subscribers.delete(cb);
-            if (subscribers.size === 0) {
-              unsub();
-            }
-          };
-        },
-        push: (path, state) => {
-          assignKey(state);
-          queueTask(() => {
-            opts.pushState(path, state);
-          });
-        },
-        replace: (path, state) => {
-          assignKey(state);
-          queueTask(() => {
-            opts.replaceState(path, state);
-          });
-        },
-        go: index => {
-          queueTask(() => {
-            opts.go(index);
-          });
-        },
-        back: () => {
-          queueTask(() => {
-            opts.back();
-          });
-        },
-        forward: () => {
-          queueTask(() => {
-            opts.forward();
+        };
+      },
+      push: (path, state) => {
+        state = assignKey(state);
+        queueTask(() => {
+          opts.pushState(path, state, onUpdate);
+        });
+      },
+      replace: (path, state) => {
+        state = assignKey(state);
+        queueTask(() => {
+          opts.replaceState(path, state, onUpdate);
+        });
+      },
+      go: index => {
+        queueTask(() => {
+          opts.go(index);
+        });
+      },
+      back: () => {
+        queueTask(() => {
+          opts.back();
+        });
+      },
+      forward: () => {
+        queueTask(() => {
+          opts.forward();
+        });
+      },
+      createHref: str => opts.createHref(str),
+      block: cb => {
+        blockers.push(cb);
+        if (blockers.length === 1) {
+          addEventListener(beforeUnloadEvent, beforeUnloadListener, {
+            capture: true
           });
-        },
-        createHref: str => opts.createHref(str),
-        block: cb => {
-          blockers.push(cb);
-          if (blockers.length === 1) {
-            addEventListener(beforeUnloadEvent, beforeUnloadListener, {
-              capture: true
-            });
-          }
-          return () => {
-            blockers = blockers.filter(b => b !== cb);
-            if (!blockers.length) {
-              stopBlocking();
-            }
-          };
         }
-      };
-    }
-    function assignKey(state) {
-      state.key = createRandomKey();
-      // if (state.__actualLocation) {
-      //   state.__actualLocation.state = {
-      //     ...state.__actualLocation.state,
-      //     key,
-      //   }
-      // }
+        return () => {
+          blockers = blockers.filter(b => b !== cb);
+          if (!blockers.length) {
+            stopBlocking();
+          }
+        };
+      },
+      flush: () => opts.flush?.()
+    };
+  }
+  function assignKey(state) {
+    if (!state) {
+      state = {};
     }
+    state.key = createRandomKey();
+    return state;
+  }
+
+  /**
+   * Creates a history object that can be used to interact with the browser's
+   * navigation. This is a lightweight API wrapping the browser's native methods.
+   * It is designed to work with TanStack Router, but could be used as a standalone API as well.
+   * IMPORTANT: This API implements history throttling via a microtask to prevent
+   * excessive calls to the history API. In some browsers, calling history.pushState or
+   * history.replaceState in quick succession can cause the browser to ignore subsequent
+   * calls. This API smooths out those differences and ensures that your application
+   * state will *eventually* match the browser state. In most cases, this is not a problem,
+   * but if you need to ensure that the browser state is up to date, you can use the
+   * `history.flush` method to immediately flush all pending state changes to the browser URL.
+   * @param opts
+   * @param opts.getHref A function that returns the current href (path + search + hash)
+   * @param opts.createHref A function that takes a path and returns a href (path + search + hash)
+   * @returns A history instance
+   */
+  function createBrowserHistory(opts) {
+    const getHref = opts?.getHref ?? (() => `${window.location.pathname}${window.location.search}${window.location.hash}`);
+    const createHref = opts?.createHref ?? (path => path);
+    let currentLocation = parseLocation(getHref(), window.history.state);
+    const getLocation = () => currentLocation;
+    let next;
+
+    // Because we are proactively updating the location
+    // in memory before actually updating the browser history,
+    // we need to track when we are doing this so we don't
+    // notify subscribers twice on the last update.
+    let tracking = true;
+
+    // We need to track the current scheduled update to prevent
+    // multiple updates from being scheduled at the same time.
+    let scheduled;
+
+    // This function is a wrapper to prevent any of the callback's
+    // side effects from causing a subscriber notification
+    const untrack = fn => {
+      tracking = false;
+      fn();
+      tracking = true;
+    };
 
-    function createBrowserHistory(opts) {
-      const getHref = opts?.getHref ?? (() => `${window.location.pathname}${window.location.search}${window.location.hash}`);
-      const createHref = opts?.createHref ?? (path => path);
-      const getLocation = () => parseLocation(getHref(), window.history.state);
-      return createHistory({
-        getLocation,
-        subscriber: onUpdate => {
-          window.addEventListener(pushStateEvent, onUpdate);
-          window.addEventListener(popStateEvent, onUpdate);
-          var pushState = window.history.pushState;
-          window.history.pushState = function () {
-            let res = pushState.apply(history, arguments);
-            onUpdate();
-            return res;
-          };
-          var replaceState = window.history.replaceState;
-          window.history.replaceState = function () {
-            let res = replaceState.apply(history, arguments);
-            onUpdate();
-            return res;
-          };
-          return () => {
-            window.history.pushState = pushState;
-            window.history.replaceState = replaceState;
-            window.removeEventListener(pushStateEvent, onUpdate);
-            window.removeEventListener(popStateEvent, onUpdate);
-          };
-        },
-        pushState: (path, state) => {
-          window.history.pushState(state, '', createHref(path));
-        },
-        replaceState: (path, state) => {
-          window.history.replaceState(state, '', createHref(path));
-        },
-        back: () => window.history.back(),
-        forward: () => window.history.forward(),
-        go: n => window.history.go(n),
-        createHref: path => createHref(path)
-      });
-    }
-    function createHashHistory() {
-      return createBrowserHistory({
-        getHref: () => window.location.hash.substring(1),
-        createHref: path => `#${path}`
-      });
-    }
-    function createMemoryHistory(opts = {
-      initialEntries: ['/']
-    }) {
-      const entries = opts.initialEntries;
-      let index = opts.initialIndex ?? entries.length - 1;
-      let currentState = {
-        key: createRandomKey()
-      };
-      const getLocation = () => parseLocation(entries[index], currentState);
-      return createHistory({
-        getLocation,
-        subscriber: false,
-        pushState: (path, state) => {
-          currentState = state;
-          entries.push(path);
-          index++;
-        },
-        replaceState: (path, state) => {
-          currentState = state;
-          entries[index] = path;
-        },
-        back: () => {
-          index--;
-        },
-        forward: () => {
-          index = Math.min(index + 1, entries.length - 1);
-        },
-        go: n => window.history.go(n),
-        createHref: path => path
+    // This function flushes the next update to the browser history
+    const flush = () => {
+      // Do not notify subscribers about this push/replace call
+      untrack(() => {
+        if (!next) return;
+        window.history[next.isPush ? 'pushState' : 'replaceState'](next.state, '', next.href);
+        // Reset the nextIsPush flag and clear the scheduled update
+        next = undefined;
+        scheduled = undefined;
       });
-    }
-    function parseLocation(href, state) {
-      let hashIndex = href.indexOf('#');
-      let searchIndex = href.indexOf('?');
-      return {
-        href,
-        pathname: href.substring(0, hashIndex > 0 ? searchIndex > 0 ? Math.min(hashIndex, searchIndex) : hashIndex : searchIndex > 0 ? searchIndex : href.length),
-        hash: hashIndex > -1 ? href.substring(hashIndex) : '',
-        search: searchIndex > -1 ? href.slice(searchIndex, hashIndex === -1 ? undefined : hashIndex) : '',
-        state: state || {}
-      };
-    }
+    };
 
-    // Thanks co-pilot!
-    function createRandomKey() {
-      return (Math.random() + 1).toString(36).substring(7);
-    }
+    // This function queues up a call to update the browser history
+    const queueHistoryAction = (type, path, state, onUpdate) => {
+      const href = createHref(path);
 
-    // type Compute<T> = { [K in keyof T]: T[K] } | never
-
-    // type AllKeys<T> = T extends any ? keyof T : never
-
-    // export type MergeUnion<T, Keys extends keyof T = keyof T> = Compute<
-    //   {
-    //     [K in Keys]: T[Keys]
-    //   } & {
-    //     [K in AllKeys<T>]?: T extends any
-    //       ? K extends keyof T
-    //         ? T[K]
-    //         : never
-    //       : never
-    //   }
-    // >
-    function last(arr) {
-      return arr[arr.length - 1];
-    }
-    function isFunction(d) {
-      return typeof d === 'function';
-    }
-    function functionalUpdate(updater, previous) {
-      if (isFunction(updater)) {
-        return updater(previous);
+      // Update the location in memory
+      currentLocation = parseLocation(href, state);
+
+      // Keep track of the next location we need to flush to the URL
+      next = {
+        href,
+        state,
+        isPush: next?.isPush || type === 'push'
+      };
+      // Notify subscribers
+      onUpdate();
+      if (!scheduled) {
+        // Schedule an update to the browser history
+        scheduled = Promise.resolve().then(() => flush());
       }
-      return updater;
-    }
-    function pick(parent, keys) {
-      return keys.reduce((obj, key) => {
-        obj[key] = parent[key];
-        return obj;
-      }, {});
-    }
+    };
+    return createHistory({
+      getLocation,
+      subscriber: onUpdate => {
+        window.addEventListener(pushStateEvent, () => {
+          currentLocation = parseLocation(getHref(), window.history.state);
+          onUpdate();
+        });
+        window.addEventListener(popStateEvent, () => {
+          currentLocation = parseLocation(getHref(), window.history.state);
+          onUpdate();
+        });
+        var pushState = window.history.pushState;
+        window.history.pushState = function () {
+          let res = pushState.apply(history, arguments);
+          if (tracking) onUpdate();
+          return res;
+        };
+        var replaceState = window.history.replaceState;
+        window.history.replaceState = function () {
+          let res = replaceState.apply(history, arguments);
+          if (tracking) onUpdate();
+          return res;
+        };
+        return () => {
+          window.history.pushState = pushState;
+          window.history.replaceState = replaceState;
+          window.removeEventListener(pushStateEvent, onUpdate);
+          window.removeEventListener(popStateEvent, onUpdate);
+        };
+      },
+      pushState: (path, state, onUpdate) => queueHistoryAction('push', path, state, onUpdate),
+      replaceState: (path, state, onUpdate) => queueHistoryAction('replace', path, state, onUpdate),
+      back: () => window.history.back(),
+      forward: () => window.history.forward(),
+      go: n => window.history.go(n),
+      createHref: path => createHref(path),
+      flush
+    });
+  }
+  function createHashHistory() {
+    return createBrowserHistory({
+      getHref: () => window.location.hash.substring(1),
+      createHref: path => `#${path}`
+    });
+  }
+  function createMemoryHistory(opts = {
+    initialEntries: ['/']
+  }) {
+    const entries = opts.initialEntries;
+    let index = opts.initialIndex ?? entries.length - 1;
+    let currentState = {
+      key: createRandomKey()
+    };
+    const getLocation = () => parseLocation(entries[index], currentState);
+    return createHistory({
+      getLocation,
+      subscriber: false,
+      pushState: (path, state) => {
+        currentState = state;
+        entries.push(path);
+        index++;
+      },
+      replaceState: (path, state) => {
+        currentState = state;
+        entries[index] = path;
+      },
+      back: () => {
+        index--;
+      },
+      forward: () => {
+        index = Math.min(index + 1, entries.length - 1);
+      },
+      go: n => window.history.go(n),
+      createHref: path => path
+    });
+  }
+  function parseLocation(href, state) {
+    let hashIndex = href.indexOf('#');
+    let searchIndex = href.indexOf('?');
+    return {
+      href,
+      pathname: href.substring(0, hashIndex > 0 ? searchIndex > 0 ? Math.min(hashIndex, searchIndex) : hashIndex : searchIndex > 0 ? searchIndex : href.length),
+      hash: hashIndex > -1 ? href.substring(hashIndex) : '',
+      search: searchIndex > -1 ? href.slice(searchIndex, hashIndex === -1 ? undefined : hashIndex) : '',
+      state: state || {}
+    };
+  }
 
-    /**
-     * This function returns `a` if `b` is deeply equal.
-     * If not, it will replace any deeply equal children of `b` with those of `a`.
-     * This can be used for structural sharing between immutable JSON values for example.
-     * Do not use this with signals
-     */
-    function replaceEqualDeep(prev, _next) {
-      if (prev === _next) {
-        return prev;
+  // Thanks co-pilot!
+  function createRandomKey() {
+    return (Math.random() + 1).toString(36).substring(7);
+  }
+
+  var prefix = 'Invariant failed';
+  function invariant(condition, message) {
+      if (condition) {
+          return;
       }
-      const next = _next;
-      const array = Array.isArray(prev) && Array.isArray(next);
-      if (array || isPlainObject(prev) && isPlainObject(next)) {
-        const prevSize = array ? prev.length : Object.keys(prev).length;
-        const nextItems = array ? next : Object.keys(next);
-        const nextSize = nextItems.length;
-        const copy = array ? [] : {};
-        let equalItems = 0;
-        for (let i = 0; i < nextSize; i++) {
-          const key = array ? i : nextItems[i];
-          copy[key] = replaceEqualDeep(prev[key], next[key]);
-          if (copy[key] === prev[key]) {
-            equalItems++;
-          }
-        }
-        return prevSize === nextSize && equalItems === prevSize ? prev : copy;
+      var provided = typeof message === 'function' ? message() : message;
+      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+      throw new Error(value);
+  }
+
+  function warning(condition, message) {
+    {
+      if (condition) {
+        return;
       }
-      return next;
-    }
 
-    // Copied from: https://github.com/jonschlinkert/is-plain-object
-    function isPlainObject(o) {
-      if (!hasObjectPrototype(o)) {
-        return false;
-      }
+      var text = "Warning: " + message;
 
-      // If has modified constructor
-      const ctor = o.constructor;
-      if (typeof ctor === 'undefined') {
-        return true;
+      if (typeof console !== 'undefined') {
+        console.warn(text);
       }
 
-      // If has modified prototype
-      const prot = ctor.prototype;
-      if (!hasObjectPrototype(prot)) {
-        return false;
+      try {
+        throw Error(text);
+      } catch (x) {}
+    }
+  }
+
+  // export type Expand<T> = T
+
+  // type Compute<T> = { [K in keyof T]: T[K] } | never
+
+  // type AllKeys<T> = T extends any ? keyof T : never
+
+  // export type MergeUnion<T, Keys extends keyof T = keyof T> = Compute<
+  //   {
+  //     [K in Keys]: T[Keys]
+  //   } & {
+  //     [K in AllKeys<T>]?: T extends any
+  //       ? K extends keyof T
+  //         ? T[K]
+  //         : never
+  //       : never
+  //   }
+  // >
+  function last(arr) {
+    return arr[arr.length - 1];
+  }
+  function isFunction(d) {
+    return typeof d === 'function';
+  }
+  function functionalUpdate(updater, previous) {
+    if (isFunction(updater)) {
+      return updater(previous);
+    }
+    return updater;
+  }
+  function pick(parent, keys) {
+    return keys.reduce((obj, key) => {
+      obj[key] = parent[key];
+      return obj;
+    }, {});
+  }
+
+  /**
+   * This function returns `a` if `b` is deeply equal.
+   * If not, it will replace any deeply equal children of `b` with those of `a`.
+   * This can be used for structural sharing between immutable JSON values for example.
+   * Do not use this with signals
+   */
+  function replaceEqualDeep(prev, _next) {
+    if (prev === _next) {
+      return prev;
+    }
+    const next = _next;
+    const array = Array.isArray(prev) && Array.isArray(next);
+    if (array || isPlainObject(prev) && isPlainObject(next)) {
+      const prevSize = array ? prev.length : Object.keys(prev).length;
+      const nextItems = array ? next : Object.keys(next);
+      const nextSize = nextItems.length;
+      const copy = array ? [] : {};
+      let equalItems = 0;
+      for (let i = 0; i < nextSize; i++) {
+        const key = array ? i : nextItems[i];
+        copy[key] = replaceEqualDeep(prev[key], next[key]);
+        if (copy[key] === prev[key]) {
+          equalItems++;
+        }
       }
+      return prevSize === nextSize && equalItems === prevSize ? prev : copy;
+    }
+    return next;
+  }
 
-      // If constructor does not have an Object-specific method
-      if (!prot.hasOwnProperty('isPrototypeOf')) {
-        return false;
-      }
+  // Copied from: https://github.com/jonschlinkert/is-plain-object
+  function isPlainObject(o) {
+    if (!hasObjectPrototype(o)) {
+      return false;
+    }
 
-      // Most likely a plain Object
+    // If has modified constructor
+    const ctor = o.constructor;
+    if (typeof ctor === 'undefined') {
       return true;
     }
-    function hasObjectPrototype(o) {
-      return Object.prototype.toString.call(o) === '[object Object]';
-    }
-    function partialDeepEqual(a, b) {
-      if (a === b) {
-        return true;
-      }
-      if (typeof a !== typeof b) {
-        return false;
-      }
-      if (isPlainObject(a) && isPlainObject(b)) {
-        return !Object.keys(b).some(key => !partialDeepEqual(a[key], b[key]));
-      }
-      if (Array.isArray(a) && Array.isArray(b)) {
-        return a.length === b.length && a.every((item, index) => partialDeepEqual(item, b[index]));
-      }
+
+    // If has modified prototype
+    const prot = ctor.prototype;
+    if (!hasObjectPrototype(prot)) {
       return false;
     }
 
-    function joinPaths(paths) {
-      return cleanPath(paths.filter(Boolean).join('/'));
+    // If constructor does not have an Object-specific method
+    if (!prot.hasOwnProperty('isPrototypeOf')) {
+      return false;
     }
-    function cleanPath(path) {
-      // remove double slashes
-      return path.replace(/\/{2,}/g, '/');
+
+    // Most likely a plain Object
+    return true;
+  }
+  function hasObjectPrototype(o) {
+    return Object.prototype.toString.call(o) === '[object Object]';
+  }
+  function partialDeepEqual(a, b) {
+    if (a === b) {
+      return true;
     }
-    function trimPathLeft(path) {
-      return path === '/' ? path : path.replace(/^\/{1,}/, '');
+    if (typeof a !== typeof b) {
+      return false;
     }
-    function trimPathRight(path) {
-      return path === '/' ? path : path.replace(/\/{1,}$/, '');
+    if (isPlainObject(a) && isPlainObject(b)) {
+      return !Object.keys(b).some(key => !partialDeepEqual(a[key], b[key]));
     }
-    function trimPath(path) {
-      return trimPathRight(trimPathLeft(path));
+    if (Array.isArray(a) && Array.isArray(b)) {
+      return a.length === b.length && a.every((item, index) => partialDeepEqual(item, b[index]));
     }
-    function resolvePath(basepath, base, to) {
-      base = base.replace(new RegExp(`^${basepath}`), '/');
-      to = to.replace(new RegExp(`^${basepath}`), '/');
-      let baseSegments = parsePathname(base);
-      const toSegments = parsePathname(to);
-      toSegments.forEach((toSegment, index) => {
-        if (toSegment.value === '/') {
-          if (!index) {
-            // Leading slash
-            baseSegments = [toSegment];
-          } else if (index === toSegments.length - 1) {
-            // Trailing Slash
-            baseSegments.push(toSegment);
-          } else ;
-        } else if (toSegment.value === '..') {
-          // Extra trailing slash? pop it off
-          if (baseSegments.length > 1 && last(baseSegments)?.value === '/') {
-            baseSegments.pop();
-          }
-          baseSegments.pop();
-        } else if (toSegment.value === '.') {
-          return;
-        } else {
+    return false;
+  }
+
+  function joinPaths(paths) {
+    return cleanPath(paths.filter(Boolean).join('/'));
+  }
+  function cleanPath(path) {
+    // remove double slashes
+    return path.replace(/\/{2,}/g, '/');
+  }
+  function trimPathLeft(path) {
+    return path === '/' ? path : path.replace(/^\/{1,}/, '');
+  }
+  function trimPathRight(path) {
+    return path === '/' ? path : path.replace(/\/{1,}$/, '');
+  }
+  function trimPath(path) {
+    return trimPathRight(trimPathLeft(path));
+  }
+  function resolvePath(basepath, base, to) {
+    base = base.replace(new RegExp(`^${basepath}`), '/');
+    to = to.replace(new RegExp(`^${basepath}`), '/');
+    let baseSegments = parsePathname(base);
+    const toSegments = parsePathname(to);
+    toSegments.forEach((toSegment, index) => {
+      if (toSegment.value === '/') {
+        if (!index) {
+          // Leading slash
+          baseSegments = [toSegment];
+        } else if (index === toSegments.length - 1) {
+          // Trailing Slash
           baseSegments.push(toSegment);
+        } else ;
+      } else if (toSegment.value === '..') {
+        // Extra trailing slash? pop it off
+        if (baseSegments.length > 1 && last(baseSegments)?.value === '/') {
+          baseSegments.pop();
         }
+        baseSegments.pop();
+      } else if (toSegment.value === '.') {
+        return;
+      } else {
+        baseSegments.push(toSegment);
+      }
+    });
+    const joined = joinPaths([basepath, ...baseSegments.map(d => d.value)]);
+    return cleanPath(joined);
+  }
+  function parsePathname(pathname) {
+    if (!pathname) {
+      return [];
+    }
+    pathname = cleanPath(pathname);
+    const segments = [];
+    if (pathname.slice(0, 1) === '/') {
+      pathname = pathname.substring(1);
+      segments.push({
+        type: 'pathname',
+        value: '/'
       });
-      const joined = joinPaths([basepath, ...baseSegments.map(d => d.value)]);
-      return cleanPath(joined);
     }
-    function parsePathname(pathname) {
-      if (!pathname) {
-        return [];
-      }
-      pathname = cleanPath(pathname);
-      const segments = [];
-      if (pathname.slice(0, 1) === '/') {
-        pathname = pathname.substring(1);
-        segments.push({
-          type: 'pathname',
-          value: '/'
-        });
-      }
-      if (!pathname) {
-        return segments;
-      }
+    if (!pathname) {
+      return segments;
+    }
 
-      // Remove empty segments and '.' segments
-      const split = pathname.split('/').filter(Boolean);
-      segments.push(...split.map(part => {
-        if (part === '$' || part === '*') {
-          return {
-            type: 'wildcard',
-            value: part
-          };
-        }
-        if (part.charAt(0) === '$') {
-          return {
-            type: 'param',
-            value: part
-          };
-        }
+    // Remove empty segments and '.' segments
+    const split = pathname.split('/').filter(Boolean);
+    segments.push(...split.map(part => {
+      if (part === '$' || part === '*') {
         return {
-          type: 'pathname',
+          type: 'wildcard',
           value: part
         };
-      }));
-      if (pathname.slice(-1) === '/') {
-        pathname = pathname.substring(1);
-        segments.push({
-          type: 'pathname',
-          value: '/'
-        });
       }
-      return segments;
-    }
-    function interpolatePath(path, params, leaveWildcards = false) {
-      const interpolatedPathSegments = parsePathname(path);
-      return joinPaths(interpolatedPathSegments.map(segment => {
-        if (segment.type === 'wildcard') {
-          const value = params[segment.value];
-          if (leaveWildcards) return `${segment.value}${value ?? ''}`;
-          return value;
-        }
-        if (segment.type === 'param') {
-          return params[segment.value.substring(1)] ?? '';
-        }
-        return segment.value;
-      }));
-    }
-    function matchPathname(basepath, currentPathname, matchLocation) {
-      const pathParams = matchByPath(basepath, currentPathname, matchLocation);
-      // const searchMatched = matchBySearch(location.search, matchLocation)
-
-      if (matchLocation.to && !pathParams) {
-        return;
+      if (part.charAt(0) === '$') {
+        return {
+          type: 'param',
+          value: part
+        };
       }
-      return pathParams ?? {};
+      return {
+        type: 'pathname',
+        value: part
+      };
+    }));
+    if (pathname.slice(-1) === '/') {
+      pathname = pathname.substring(1);
+      segments.push({
+        type: 'pathname',
+        value: '/'
+      });
     }
-    function matchByPath(basepath, from, matchLocation) {
-      // Remove the base path from the pathname
-      from = basepath != '/' ? from.substring(basepath.length) : from;
-      // Default to to $ (wildcard)
-      const to = `${matchLocation.to ?? '$'}`;
-      // Parse the from and to
-      const baseSegments = parsePathname(from);
-      const routeSegments = parsePathname(to);
-      if (!from.startsWith('/')) {
-        baseSegments.unshift({
-          type: 'pathname',
-          value: '/'
-        });
+    return segments;
+  }
+  function interpolatePath(path, params, leaveWildcards = false) {
+    const interpolatedPathSegments = parsePathname(path);
+    return joinPaths(interpolatedPathSegments.map(segment => {
+      if (segment.type === 'wildcard') {
+        const value = params[segment.value];
+        if (leaveWildcards) return `${segment.value}${value ?? ''}`;
+        return value;
       }
-      if (!to.startsWith('/')) {
-        routeSegments.unshift({
-          type: 'pathname',
-          value: '/'
-        });
+      if (segment.type === 'param') {
+        return params[segment.value.substring(1)] ?? '';
       }
-      const params = {};
-      let isMatch = (() => {
-        for (let i = 0; i < Math.max(baseSegments.length, routeSegments.length); i++) {
-          const baseSegment = baseSegments[i];
-          const routeSegment = routeSegments[i];
-          const isLastBaseSegment = i >= baseSegments.length - 1;
-          const isLastRouteSegment = i >= routeSegments.length - 1;
-          if (routeSegment) {
-            if (routeSegment.type === 'wildcard') {
-              if (baseSegment?.value) {
-                params['*'] = joinPaths(baseSegments.slice(i).map(d => d.value));
-                return true;
-              }
-              return false;
+      return segment.value;
+    }));
+  }
+  function matchPathname(basepath, currentPathname, matchLocation) {
+    const pathParams = matchByPath(basepath, currentPathname, matchLocation);
+    // const searchMatched = matchBySearch(location.search, matchLocation)
+
+    if (matchLocation.to && !pathParams) {
+      return;
+    }
+    return pathParams ?? {};
+  }
+  function matchByPath(basepath, from, matchLocation) {
+    // Remove the base path from the pathname
+    from = basepath != '/' ? from.substring(basepath.length) : from;
+    // Default to to $ (wildcard)
+    const to = `${matchLocation.to ?? '$'}`;
+    // Parse the from and to
+    const baseSegments = parsePathname(from);
+    const routeSegments = parsePathname(to);
+    if (!from.startsWith('/')) {
+      baseSegments.unshift({
+        type: 'pathname',
+        value: '/'
+      });
+    }
+    if (!to.startsWith('/')) {
+      routeSegments.unshift({
+        type: 'pathname',
+        value: '/'
+      });
+    }
+    const params = {};
+    let isMatch = (() => {
+      for (let i = 0; i < Math.max(baseSegments.length, routeSegments.length); i++) {
+        const baseSegment = baseSegments[i];
+        const routeSegment = routeSegments[i];
+        const isLastBaseSegment = i >= baseSegments.length - 1;
+        const isLastRouteSegment = i >= routeSegments.length - 1;
+        if (routeSegment) {
+          if (routeSegment.type === 'wildcard') {
+            if (baseSegment?.value) {
+              params['*'] = joinPaths(baseSegments.slice(i).map(d => d.value));
+              return true;
             }
-            if (routeSegment.type === 'pathname') {
-              if (routeSegment.value === '/' && !baseSegment?.value) {
-                return true;
-              }
-              if (baseSegment) {
-                if (matchLocation.caseSensitive) {
-                  if (routeSegment.value !== baseSegment.value) {
-                    return false;
-                  }
-                } else if (routeSegment.value.toLowerCase() !== baseSegment.value.toLowerCase()) {
+            return false;
+          }
+          if (routeSegment.type === 'pathname') {
+            if (routeSegment.value === '/' && !baseSegment?.value) {
+              return true;
+            }
+            if (baseSegment) {
+              if (matchLocation.caseSensitive) {
+                if (routeSegment.value !== baseSegment.value) {
                   return false;
                 }
+              } else if (routeSegment.value.toLowerCase() !== baseSegment.value.toLowerCase()) {
+                return false;
               }
             }
-            if (!baseSegment) {
+          }
+          if (!baseSegment) {
+            return false;
+          }
+          if (routeSegment.type === 'param') {
+            if (baseSegment?.value === '/') {
               return false;
             }
-            if (routeSegment.type === 'param') {
-              if (baseSegment?.value === '/') {
-                return false;
-              }
-              if (baseSegment.value.charAt(0) !== '$') {
-                params[routeSegment.value.substring(1)] = baseSegment.value;
-              }
+            if (baseSegment.value.charAt(0) !== '$') {
+              params[routeSegment.value.substring(1)] = baseSegment.value;
             }
           }
-          if (!isLastBaseSegment && isLastRouteSegment) {
-            return !!matchLocation.fuzzy;
-          }
         }
-        return true;
-      })();
-      return isMatch ? params : undefined;
-    }
-
-    // @ts-nocheck
-
-    // qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
-
-    function encode(obj, pfx) {
-      var k,
-        i,
-        tmp,
-        str = '';
-      for (k in obj) {
-        if ((tmp = obj[k]) !== void 0) {
-          if (Array.isArray(tmp)) {
-            for (i = 0; i < tmp.length; i++) {
-              str && (str += '&');
-              str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i]);
-            }
-          } else {
+        if (!isLastBaseSegment && isLastRouteSegment) {
+          return !!matchLocation.fuzzy;
+        }
+      }
+      return true;
+    })();
+    return isMatch ? params : undefined;
+  }
+
+  // @ts-nocheck
+
+  // qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
+
+  function encode(obj, pfx) {
+    var k,
+      i,
+      tmp,
+      str = '';
+    for (k in obj) {
+      if ((tmp = obj[k]) !== void 0) {
+        if (Array.isArray(tmp)) {
+          for (i = 0; i < tmp.length; i++) {
             str && (str += '&');
-            str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp);
+            str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i]);
           }
+        } else {
+          str && (str += '&');
+          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp);
         }
       }
-      return (pfx || '') + str;
-    }
-    function toValue(mix) {
-      if (!mix) return '';
-      var str = decodeURIComponent(mix);
-      if (str === 'false') return false;
-      if (str === 'true') return true;
-      return +str * 0 === 0 && +str + '' === str ? +str : str;
     }
-    function decode(str) {
-      var tmp,
-        k,
-        out = {},
-        arr = str.split('&');
-      while (tmp = arr.shift()) {
-        tmp = tmp.split('=');
-        k = tmp.shift();
-        if (out[k] !== void 0) {
-          out[k] = [].concat(out[k], toValue(tmp.shift()));
-        } else {
-          out[k] = toValue(tmp.shift());
-        }
+    return (pfx || '') + str;
+  }
+  function toValue(mix) {
+    if (!mix) return '';
+    var str = decodeURIComponent(mix);
+    if (str === 'false') return false;
+    if (str === 'true') return true;
+    return +str * 0 === 0 && +str + '' === str ? +str : str;
+  }
+  function decode(str) {
+    var tmp,
+      k,
+      out = {},
+      arr = str.split('&');
+    while (tmp = arr.shift()) {
+      tmp = tmp.split('=');
+      k = tmp.shift();
+      if (out[k] !== void 0) {
+        out[k] = [].concat(out[k], toValue(tmp.shift()));
+      } else {
+        out[k] = toValue(tmp.shift());
       }
-      return out;
     }
+    return out;
+  }
 
-    const rootRouteId = '__root__';
+  const rootRouteId = '__root__';
 
-    // The parse type here allows a zod schema to be passed directly to the validator
+  // 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>
+  // 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()
+  // export type UseLoaderResultPromise<T> = T extends Promise<infer U>
+  //   ? StreamedPromise<U>
+  //   : T
+  class Route {
+    // Set up in this.init()
 
-      // customId!: TCustomId
+    // customId!: TCustomId
 
-      // Optional
+    // Optional
 
-      constructor(options) {
-        this.options = options || {};
-        this.isRoot = !options?.getParentRoute;
-        Route.__onInit(this);
+    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.`);
       }
-      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;
+      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;
+      // 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
-      };
-    }
-    class RouterContext {
-      constructor() {}
-      createRootRoute = options => {
-        return new RootRoute(options);
-      };
-    }
-    class RootRoute extends Route {
-      constructor(options) {
-        super(options);
+      // 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
+    };
+  }
+  class RouterContext {
+    constructor() {}
+    createRootRoute = options => {
+      return new RootRoute(options);
+    };
+  }
+  class RootRoute extends Route {
+    constructor(options) {
+      super(options);
     }
-    function createRouteMask(opts) {
-      return opts;
+  }
+  function createRouteMask(opts) {
+    return opts;
+  }
+
+  class FileRoute {
+    constructor(path) {
+      this.path = path;
     }
-
-    class FileRoute {
-      constructor(path) {
-        this.path = path;
-      }
-      createRoute = options => {
-        const route = new Route(options);
-        route.isRoot = false;
-        return route;
-      };
+    createRoute = options => {
+      const route = new Route(options);
+      route.isRoot = false;
+      return route;
+    };
+  }
+
+  /**
+   * @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;
     }
-
-    /**
-     * @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?.();
-        };
+    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';
-        }
+    };
+    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
-        });
+      // 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'
-          });
+      // 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();
-      };
-    }
-
-    const defaultParseSearch = parseSearchWith(JSON.parse);
-    const defaultStringifySearch = stringifySearchWith(JSON.stringify, JSON.parse);
-    function parseSearchWith(parser) {
-      return searchStr => {
-        if (searchStr.substring(0, 1) === '?') {
-          searchStr = searchStr.substring(1);
-        }
-        let query = decode(searchStr);
+      });
+    };
+    batch = cb => {
+      if (this._batching) return cb();
+      this._batching = true;
+      cb();
+      this._batching = false;
+      this._flush();
+    };
+  }
+
+  const defaultParseSearch = parseSearchWith(JSON.parse);
+  const defaultStringifySearch = stringifySearchWith(JSON.stringify, JSON.parse);
+  function parseSearchWith(parser) {
+    return searchStr => {
+      if (searchStr.substring(0, 1) === '?') {
+        searchStr = searchStr.substring(1);
+      }
+      let query = decode(searchStr);
 
-        // Try to parse any query params that might be json
-        for (let key in query) {
-          const value = query[key];
-          if (typeof value === 'string') {
-            try {
-              query[key] = parser(value);
-            } catch (err) {
-              //
-            }
-          }
-        }
-        return query;
-      };
-    }
-    function stringifySearchWith(stringify, parser) {
-      function stringifyValue(val) {
-        if (typeof val === 'object' && val !== null) {
-          try {
-            return stringify(val);
-          } catch (err) {
-            // silent
-          }
-        } else if (typeof val === 'string' && typeof parser === 'function') {
+      // Try to parse any query params that might be json
+      for (let key in query) {
+        const value = query[key];
+        if (typeof value === 'string') {
           try {
-            // Check if it's a valid parseable string.
-            // If it is, then stringify it again.
-            parser(val);
-            return stringify(val);
+            query[key] = parser(value);
           } catch (err) {
-            // silent
+            //
           }
         }
-        return val;
       }
-      return search => {
-        search = {
-          ...search
-        };
-        if (search) {
-          Object.keys(search).forEach(key => {
-            const val = search[key];
-            if (typeof val === 'undefined' || val === undefined) {
-              delete search[key];
-            } else {
-              search[key] = stringifyValue(val);
-            }
-          });
+      return query;
+    };
+  }
+  function stringifySearchWith(stringify, parser) {
+    function stringifyValue(val) {
+      if (typeof val === 'object' && val !== null) {
+        try {
+          return stringify(val);
+        } catch (err) {
+          // silent
         }
-        const searchStr = encode(search).toString();
-        return searchStr ? `?${searchStr}` : '';
-      };
-    }
-
-    //
-
-    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>>
-
-      constructor(options) {
-        this.options = {
-          defaultPreloadDelay: 50,
-          context: 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
-          });
+      } else if (typeof val === 'string' && typeof parser === 'function') {
+        try {
+          // Check if it's a valid parseable string.
+          // If it is, then stringify it again.
+          parser(val);
+          return stringify(val);
+        } catch (err) {
+          // silent
         }
       }
-      subscribers = new Set();
-      subscribe = (eventType, fn) => {
-        const listener = {
-          eventType,
-          fn
-        };
-        this.subscribers.add(listener);
-        return () => {
-          this.subscribers.delete(listener);
-        };
+      return val;
+    }
+    return search => {
+      search = {
+        ...search
       };
-      #emit = routerEvent => {
-        this.subscribers.forEach(listener => {
-          if (listener.eventType === routerEvent.type) {
-            listener.fn(routerEvent);
+      if (search) {
+        Object.keys(search).forEach(key => {
+          const val = search[key];
+          if (typeof val === 'undefined' || val === undefined) {
+            delete search[key];
+          } else {
+            search[key] = stringifyValue(val);
           }
         });
+      }
+      const searchStr = encode(search).toString();
+      return searchStr ? `?${searchStr}` : '';
+    };
+  }
+
+  //
+
+  const 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>>
+
+    constructor(options) {
+      this.options = {
+        defaultPreloadDelay: 50,
+        context: undefined,
+        ...options,
+        stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+        parseSearch: options?.parseSearch ?? defaultParseSearch
+        // fetchServerDataFn: options?.fetchServerDataFn ?? defaultFetchServerDataFn,
       };
-      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);
+
+      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]);
           }
-        };
-      };
-      #onFocus = () => {
-        if (this.options.reloadOnWindowFocus ?? true) {
-          this.invalidate({
-            __fromFocus: true
-          });
-        }
-      };
-      update = opts => {
-        this.options = {
-          ...this.options,
-          ...opts,
-          context: {
-            ...this.options.context,
-            ...opts?.context
+          if (matchesByIdChanged || matchesChanged) {
+            next.matches = next.matchIds.map(id => {
+              return next.matchesById[id];
+            });
           }
-        };
-        if (!this.history || this.options.history && this.options.history !== this.history) {
-          if (this.#unsubHistory) {
-            this.#unsubHistory();
+          if (matchesByIdChanged || pendingMatchesChanged) {
+            next.pendingMatches = next.pendingMatchIds.map(id => {
+              return next.matchesById[id];
+            });
           }
-          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)
+          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
+        });
+      }
+    }
+    subscribers = new Set();
+    subscribe = (eventType, fn) => {
+      const listener = {
+        eventType,
+        fn
+      };
+      this.subscribers.add(listener);
+      return () => {
+        this.subscribers.delete(listener);
+      };
+    };
+    #emit = routerEvent => {
+      this.subscribers.forEach(listener => {
+        if (listener.eventType === routerEvent.type) {
+          listener.fn(routerEvent);
         }
-        const {
-          basepath,
-          routeTree
-        } = this.options;
-        this.basepath = `/${trimPath(basepath ?? '') ?? ''}`;
-        if (routeTree && routeTree !== this.routeTree) {
-          this.#processRoutes(routeTree);
+      });
+    };
+    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);
         }
-        return this;
       };
-      cancelMatches = () => {
-        this.state.matches.forEach(match => {
-          this.cancelMatch(match.id);
+    };
+    #onFocus = () => {
+      if (this.options.reloadOnWindowFocus ?? true) {
+        this.invalidate({
+          __fromFocus: true
         });
-      };
-      cancelMatch = id => {
-        this.getRouteMatch(id)?.abortController?.abort();
-      };
-      safeLoad = async opts => {
-        try {
-          return this.load(opts);
-        } catch (err) {
-          // Don't do anything
+      }
+    };
+    update = opts => {
+      this.options = {
+        ...this.options,
+        ...opts,
+        context: {
+          ...this.options.context,
+          ...opts?.context
         }
       };
-      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
-
-          let pendingMatches;
-          this.#emit({
-            type: 'onBeforeLoad',
-            from: prevLocation,
-            to: opts?.next ?? this.state.location,
-            pathChanged: pathDidChange
+      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)
           });
-          this.__store.batch(() => {
-            if (opts?.next) {
-              // Ingest the new location
-              this.__store.setState(s => ({
-                ...s,
-                location: opts.next
-              }));
-            }
+        });
+      }
+      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;
+        };
 
-            // Match the routes
-            pendingMatches = this.matchRoutes(this.state.location.pathname, this.state.location.search, {
-              throwOnError: opts?.throwOnError,
-              debug: true
-            });
+        // Cancel any pending matches
+
+        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,
-              status: 'pending',
-              pendingMatchIds: pendingMatches.map(d => d.id),
-              matchesById: this.#mergeMatches(s.matchesById, pendingMatches)
+              location: opts.next
             }));
+          }
+
+          // 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 {
-            // 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
-            }
+            await this.loadMatches(pendingMatches.map(d => d.id));
+          } 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;
-            }
-            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
+          // 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);
             });
-            resolve();
-          } catch (err) {
-            // Only apply the latest transition
-            if (latestPromise = checkLatest()) {
-              return latestPromise;
-            }
-            reject(err);
+          });
+          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;
           }
-        });
-        this.latestLoadPromise = promise;
-        this.latestLoadPromise.then(() => {
-          this.cleanMatches();
-        });
-        return this.latestLoadPromise;
+          reject(err);
+        }
+      });
+      this.latestLoadPromise = promise;
+      this.latestLoadPromise.then(() => {
+        this.cleanMatches();
+      });
+      return this.latestLoadPromise;
+    };
+    #mergeMatches = (prevMatchesById, nextMatches) => {
+      let matchesById = {
+        ...prevMatchesById
       };
-      #mergeMatches = (prevMatchesById, nextMatches) => {
-        let matchesById = {
-          ...prevMatchesById
+      nextMatches.forEach(match => {
+        if (!matchesById[match.id]) {
+          matchesById[match.id] = match;
+        }
+        matchesById[match.id] = {
+          ...matchesById[match.id],
+          ...match
         };
-        nextMatches.forEach(match => {
-          if (!matchesById[match.id]) {
-            matchesById[match.id] = match;
-          }
-          matchesById[match.id] = {
-            ...matchesById[match.id],
-            ...match
-          };
-        });
-        return matchesById;
-      };
-      getRoute = id => {
-        const route = this.routesById[id];
-        invariant(route, `Route with id "${id}" not found`);
-        return route;
-      };
-      preloadRoute = async (navigateOpts = this.state.location) => {
-        let next = this.buildLocation(navigateOpts);
-        const matches = this.matchRoutes(next.pathname, next.search, {
-          throwOnError: true
-        });
+      });
+      return matchesById;
+    };
+    getRoute = id => {
+      const route = this.routesById[id];
+      invariant(route, `Route with id "${id}" not found`);
+      return route;
+    };
+    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 => {
+        return {
+          ...s,
+          matchesById: this.#mergeMatches(s.matchesById, matches)
+        };
+      });
+      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];
+          });
           return {
             ...s,
-            matchesById: this.#mergeMatches(s.matchesById, matches)
+            matchesById
           };
         });
-        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];
-            });
-            return {
-              ...s,
-              matchesById
-            };
-          });
-        }
-      };
-      matchRoutes = (pathname, locationSearch, opts) => {
-        let routeParams = {};
-        let foundRoute = this.flatRoutes.find(route => {
-          const matchedParams = matchPathname(this.basepath, trimPathRight(pathname), {
-            to: route.fullPath,
-            caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive
-          });
-          if (matchedParams) {
-            routeParams = matchedParams;
-            return true;
-          }
-          return false;
+      }
+    };
+    matchRoutes = (pathname, locationSearch, opts) => {
+      let routeParams = {};
+      let foundRoute = this.flatRoutes.find(route => {
+        const matchedParams = matchPathname(this.basepath, trimPathRight(pathname), {
+          to: route.fullPath,
+          caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive
         });
-        let routeCursor = foundRoute || this.routesById['__root__'];
-        let matchedRoutes = [routeCursor];
-        // let includingLayouts = true
-        while (routeCursor?.parentRoute) {
-          routeCursor = routeCursor.parentRoute;
-          if (routeCursor) matchedRoutes.unshift(routeCursor);
+        if (matchedParams) {
+          routeParams = matchedParams;
+          return true;
         }
+        return false;
+      });
+      let routeCursor = foundRoute || this.routesById['__root__'];
+      let matchedRoutes = [routeCursor];
+      // let includingLayouts = true
+      while (routeCursor?.parentRoute) {
+        routeCursor = routeCursor.parentRoute;
+        if (routeCursor) matchedRoutes.unshift(routeCursor);
+      }
 
-        // Existing matches are matches that are already loaded along with
-        // pending matches that are still loading
+      // Existing matches are matches that are already loaded along with
+      // pending matches that are still loading
 
-        const parseErrors = matchedRoutes.map(route => {
-          let parsedParamsError;
-          if (route.options.parseParams) {
-            try {
-              const parsedParams = route.options.parseParams(routeParams);
-              // Add the parsed params to the accumulated params bag
-              Object.assign(routeParams, parsedParams);
-            } catch (err) {
-              parsedParamsError = new PathParamError(err.message, {
-                cause: err
-              });
-              if (opts?.throwOnError) {
-                throw parsedParamsError;
-              }
-              return parsedParamsError;
+      const parseErrors = matchedRoutes.map(route => {
+        let parsedParamsError;
+        if (route.options.parseParams) {
+          try {
+            const parsedParams = route.options.parseParams(routeParams);
+            // Add the parsed params to the accumulated params bag
+            Object.assign(routeParams, parsedParams);
+          } catch (err) {
+            parsedParamsError = new PathParamError(err.message, {
+              cause: err
+            });
+            if (opts?.throwOnError) {
+              throw parsedParamsError;
             }
+            return parsedParamsError;
           }
-          return;
+        }
+        return;
+      });
+      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 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;
-          });
 
-          // 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);
-          if (existingMatch) {
+        // 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);
+        if (existingMatch) {
+          return {
+            ...existingMatch
+          };
+        }
+
+        // Create a fresh route match
+        const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
+        const routeMatch = {
+          id: matchId,
+          loaderContext,
+          routeId: route.id,
+          params: routeParams,
+          pathname: joinPaths([this.basepath, interpolatedPath]),
+          updatedAt: Date.now(),
+          maxAge: -1,
+          preloadMaxAge: -1,
+          routeSearch: {},
+          search: {},
+          status: hasLoaders ? 'pending' : 'success',
+          isFetching: false,
+          invalid: false,
+          error: undefined,
+          paramsError: parseErrors[index],
+          searchError: undefined,
+          loaderData: undefined,
+          loadPromise: Promise.resolve(),
+          context: undefined,
+          abortController: new AbortController(),
+          fetchedAt: 0
+        };
+        return routeMatch;
+      });
+
+      // Take each match and resolve its search params and context
+      // This has to happen after the matches are created or found
+      // so that we can use the parent match's search params and context
+      matches.forEach((match, i) => {
+        const parentMatch = matches[i - 1];
+        const route = this.getRoute(match.routeId);
+        const searchInfo = (() => {
+          // Validate the search params and stabilize them
+          const parentSearchInfo = {
+            search: parentMatch?.search ?? locationSearch,
+            routeSearch: parentMatch?.routeSearch ?? locationSearch
+          };
+          try {
+            const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
+            let routeSearch = validator?.(parentSearchInfo.search) ?? {};
+            let search = {
+              ...parentSearchInfo.search,
+              ...routeSearch
+            };
+            routeSearch = replaceEqualDeep(match.routeSearch, routeSearch);
+            search = replaceEqualDeep(match.search, search);
             return {
-              ...existingMatch
+              routeSearch,
+              search,
+              searchDidChange: match.routeSearch !== routeSearch
             };
+          } catch (err) {
+            match.searchError = new SearchParamError(err.message, {
+              cause: err
+            });
+            if (opts?.throwOnError) {
+              throw match.searchError;
+            }
+            return parentSearchInfo;
           }
-
-          // Create a fresh route match
-          const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
-          const routeMatch = {
-            id: matchId,
-            loaderContext,
-            routeId: route.id,
-            params: routeParams,
-            pathname: joinPaths([this.basepath, interpolatedPath]),
-            updatedAt: Date.now(),
-            maxAge: -1,
-            preloadMaxAge: -1,
-            routeSearch: {},
-            search: {},
-            status: hasLoaders ? 'pending' : 'success',
-            isFetching: false,
-            invalid: false,
-            error: undefined,
-            paramsError: parseErrors[index],
-            searchError: undefined,
-            loaderData: undefined,
-            loadPromise: Promise.resolve(),
-            context: undefined,
-            abortController: new AbortController(),
-            fetchedAt: 0
-          };
-          return routeMatch;
+        })();
+        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;
 
-        // Take each match and resolve its search params and context
-        // This has to happen after the matches are created or found
-        // so that we can use the parent match's search params and context
-        matches.forEach((match, i) => {
-          const parentMatch = matches[i - 1];
+      // 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 searchInfo = (() => {
-            // Validate the search params and stabilize them
-            const parentSearchInfo = {
-              search: parentMatch?.search ?? locationSearch,
-              routeSearch: parentMatch?.routeSearch ?? locationSearch
-            };
+          const handleError = (err, code) => {
+            err.routerCode = code;
+            firstBadMatchIndex = firstBadMatchIndex ?? index;
+            if (isRedirect(err)) {
+              throw err;
+            }
             try {
-              const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
-              let routeSearch = validator?.(parentSearchInfo.search) ?? {};
-              let search = {
-                ...parentSearchInfo.search,
-                ...routeSearch
-              };
-              routeSearch = replaceEqualDeep(match.routeSearch, routeSearch);
-              search = replaceEqualDeep(match.search, search);
-              return {
-                routeSearch,
-                search,
-                searchDidChange: match.routeSearch !== routeSearch
-              };
-            } catch (err) {
-              match.searchError = new SearchParamError(err.message, {
-                cause: err
-              });
-              if (opts?.throwOnError) {
-                throw match.searchError;
+              route.options.onError?.(err);
+            } catch (errorHandlerErr) {
+              err = errorHandlerErr;
+              if (isRedirect(errorHandlerErr)) {
+                throw errorHandlerErr;
               }
-              return parentSearchInfo;
             }
-          })();
-          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
+              error: err,
+              status: 'error',
+              updatedAt: Date.now()
             }));
-          });
-        }
-        let firstBadMatchIndex;
-
-        // 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;
-                }
+          };
+          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
               }
-              this.setRouteMatch(match.id, s => ({
-                ...s,
-                error: err,
-                status: 'error',
-                updatedAt: Date.now()
-              }));
+            })) ?? {};
+            const context = {
+              ...parentContext,
+              ...match.loaderContext,
+              ...beforeLoadContext
             };
-            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
-              };
-              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;
-            }
+            this.setRouteMatch(match.id, s => ({
+              ...s,
+              context: replaceEqualDeep(s.context, context)
+            }));
+          } catch (err) {
+            handleError(err, 'BEFORE_LOAD');
+            didError = true;
           }
-        } catch (err) {
-          if (isRedirect(err)) {
-            if (!opts?.preload) this.navigate(err);
-            return;
+
+          // If we errored, do not run the next matches' middleware
+          if (didError) {
+            break;
           }
-          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;
+      } catch (err) {
+        if (isRedirect(err)) {
+          if (!opts?.preload) this.navigate(err);
+          return;
+        }
+        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;
+          }
+          const fetchedAt = Date.now();
+          const checkLatest = () => {
+            const latest = this.getRouteMatch(match.id);
+            return latest && latest.fetchedAt !== fetchedAt ? latest.loadPromise : undefined;
+          };
+          const handleIfRedirect = err => {
+            if (isRedirect(err)) {
+              if (!opts?.preload) {
+                this.navigate(err);
+              }
+              return true;
             }
-            const fetchedAt = Date.now();
-            const checkLatest = () => {
-              const latest = this.getRouteMatch(match.id);
-              return latest && latest.fetchedAt !== fetchedAt ? latest.loadPromise : undefined;
-            };
-            const handleIfRedirect = err => {
-              if (isRedirect(err)) {
-                if (!opts?.preload) {
-                  this.navigate(err);
+            return false;
+          };
+          const load = async () => {
+            let latestPromise;
+            try {
+              const componentsPromise = Promise.all(componentTypes.map(async type => {
+                const component = route.options[type];
+                if (component?.preload) {
+                  await component.preload();
                 }
-                return true;
-              }
-              return false;
-            };
-            const load = async () => {
-              let latestPromise;
+              }));
+              const loaderPromise = route.options.loader?.({
+                params: match.params,
+                preload: !!opts?.preload,
+                parentMatchPromise,
+                abortController: match.abortController,
+                context: match.context
+              });
+              const [_, loader] = await Promise.all([componentsPromise, loaderPromise]);
+              if (latestPromise = checkLatest()) return await latestPromise;
+              this.setRouteMatchData(match.id, () => loader, opts);
+            } catch (error) {
+              if (latestPromise = checkLatest()) return await latestPromise;
+              if (handleIfRedirect(error)) return;
               try {
-                const componentsPromise = Promise.all(componentTypes.map(async type => {
-                  const component = route.options[type];
-                  if (component?.preload) {
-                    await component.preload();
-                  }
-                }));
-                const loaderPromise = route.options.loader?.({
-                  params: match.params,
-                  preload: !!opts?.preload,
-                  parentMatchPromise,
-                  abortController: match.abortController,
-                  context: match.context
-                });
-                const [_, loader] = await Promise.all([componentsPromise, loaderPromise]);
-                if (latestPromise = checkLatest()) return await latestPromise;
-                this.setRouteMatchData(match.id, () => loader, opts);
-              } catch (error) {
-                if (latestPromise = checkLatest()) return await latestPromise;
-                if (handleIfRedirect(error)) return;
-                try {
-                  route.options.onError?.(error);
-                } catch (onErrorError) {
-                  error = onErrorError;
-                  if (handleIfRedirect(onErrorError)) return;
-                }
-                this.setRouteMatch(match.id, s => ({
-                  ...s,
-                  error,
-                  status: 'error',
-                  isFetching: false,
-                  updatedAt: Date.now()
-                }));
+                route.options.onError?.(error);
+              } catch (onErrorError) {
+                error = onErrorError;
+                if (handleIfRedirect(onErrorError)) return;
               }
-            };
-            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
+                error,
+                status: 'error',
+                isFetching: false,
+                updatedAt: Date.now()
               }));
-            });
-            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
-
-        // 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
-        });
+            }
+          };
+          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
+            }));
+          });
+          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
+
+      // 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
+      });
+    };
+    matchRoute = (location, opts) => {
+      location = {
+        ...location,
+        to: location.to ? this.resolvePath(location.from ?? '', location.to) : undefined
       };
-      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;
-        }
-        const match = matchPathname(this.basepath, baseLocation.pathname, {
-          ...opts,
-          to: next.pathname
-        });
-        if (!match) {
-          return false;
-        }
-        if (opts?.includeSearch ?? true) {
-          return partialDeepEqual(baseLocation.search, next.search) ? match : false;
+      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;
+      }
+      const match = matchPathname(this.basepath, baseLocation.pathname, {
+        ...opts,
+        to: next.pathname
+      });
+      if (!match) {
+        return false;
+      }
+      if (opts?.includeSearch ?? true) {
+        return partialDeepEqual(baseLocation.search, next.search) ? match : false;
+      }
+      return match;
+    };
+    buildLink = dest => {
+      // 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 {
+        to,
+        preload: userPreload,
+        preloadDelay: userPreloadDelay,
+        activeOptions,
+        disabled,
+        target,
+        replace,
+        resetScroll
+      } = dest;
+      try {
+        new URL(`${to}`);
+        return {
+          type: 'external',
+          href: to
+        };
+      } catch (e) {}
+      const nextOpts = dest;
+      const next = this.buildLocation(nextOpts);
+      const preload = userPreload ?? this.options.defaultPreload;
+      const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
+
+      // Compare path/hash for matches
+      const currentPathSplit = this.state.location.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;
+
+      // The final "active" test
+      const isActive = pathTest && hashTest && searchTest;
+
+      // The click handler
+      const handleClick = e => {
+        if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
+          e.preventDefault();
+
+          // All is well? Navigate!
+          this.#commitLocation({
+            ...next,
+            replace,
+            resetScroll
+          });
         }
-        return match;
       };
-      buildLink = dest => {
-        // 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 {
-          to,
-          preload: userPreload,
-          preloadDelay: userPreloadDelay,
-          activeOptions,
-          disabled,
-          target,
-          replace,
-          resetScroll
-        } = dest;
-        try {
-          new URL(`${to}`);
-          return {
-            type: 'external',
-            href: to
-          };
-        } catch (e) {}
-        const nextOpts = dest;
-        const next = this.buildLocation(nextOpts);
-        const preload = userPreload ?? this.options.defaultPreload;
-        const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
-
-        // Compare path/hash for matches
-        const currentPathSplit = this.state.location.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;
-
-        // The final "active" test
-        const isActive = pathTest && hashTest && searchTest;
-
-        // The click handler
-        const handleClick = e => {
-          if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
-            e.preventDefault();
-
-            // All is well? Navigate!
-            this.#commitLocation({
-              ...next,
-              replace,
-              resetScroll
-            });
-          }
-        };
 
-        // The click handler
-        const handleFocus = e => {
-          if (preload) {
-            this.preloadRoute(nextOpts).catch(err => {
-              console.warn(err);
-              console.warn(preloadWarning);
-            });
-          }
-        };
-        const handleTouchStart = e => {
+      // The click handler
+      const handleFocus = e => {
+        if (preload) {
           this.preloadRoute(nextOpts).catch(err => {
             console.warn(err);
             console.warn(preloadWarning);
           });
-        };
-        const handleEnter = e => {
-          const target = e.target || {};
-          if (preload) {
-            if (target.preloadTimeout) {
-              return;
-            }
-            target.preloadTimeout = setTimeout(() => {
-              target.preloadTimeout = null;
-              this.preloadRoute(nextOpts).catch(err => {
-                console.warn(err);
-                console.warn(preloadWarning);
-              });
-            }, preloadDelay);
-          }
-        };
-        const handleLeave = e => {
-          const target = e.target || {};
+        }
+      };
+      const handleTouchStart = e => {
+        this.preloadRoute(nextOpts).catch(err => {
+          console.warn(err);
+          console.warn(preloadWarning);
+        });
+      };
+      const handleEnter = e => {
+        const target = e.target || {};
+        if (preload) {
           if (target.preloadTimeout) {
-            clearTimeout(target.preloadTimeout);
-            target.preloadTimeout = null;
+            return;
           }
-        };
-        return {
-          type: 'internal',
-          next,
-          handleFocus,
-          handleClick,
-          handleEnter,
-          handleLeave,
-          handleTouchStart,
-          isActive,
-          disabled
-        };
+          target.preloadTimeout = setTimeout(() => {
+            target.preloadTimeout = null;
+            this.preloadRoute(nextOpts).catch(err => {
+              console.warn(err);
+              console.warn(preloadWarning);
+            });
+          }, preloadDelay);
+        }
       };
-      dehydrate = () => {
-        return {
-          state: {
-            matchIds: this.state.matchIds,
-            dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'invalid', 'preloadMaxAge', 'maxAge', 'id', 'loaderData', 'status', 'updatedAt']))
-          }
-        };
+      const handleLeave = e => {
+        const target = e.target || {};
+        if (target.preloadTimeout) {
+          clearTimeout(target.preloadTimeout);
+          target.preloadTimeout = null;
+        }
+      };
+      return {
+        type: 'internal',
+        next,
+        handleFocus,
+        handleClick,
+        handleEnter,
+        handleLeave,
+        handleTouchStart,
+        isActive,
+        disabled
       };
-      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__;
+    };
+    dehydrate = () => {
+      return {
+        state: {
+          matchIds: this.state.matchIds,
+          dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'invalid', 'preloadMaxAge', 'maxAge', 'id', 'loaderData', 'status', 'updatedAt']))
         }
-        invariant(_ctx, 'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?');
-        const ctx = _ctx;
-        this.dehydratedData = ctx.payload;
-        this.options.hydrate?.(ctx.payload);
-        const dehydratedState = ctx.router.state;
-        let matches = this.matchRoutes(this.state.location.pathname, this.state.location.search).map(match => {
-          const dehydratedMatch = dehydratedState.dehydratedMatches.find(d => d.id === match.id);
-          invariant(dehydratedMatch, `Could not find a client-side match for dehydrated match with id: ${match.id}!`);
-          if (dehydratedMatch) {
-            return {
-              ...match,
-              ...dehydratedMatch
-            };
-          }
-          return match;
-        });
-        this.__store.setState(s => {
+      };
+    };
+    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 {
-            ...s,
-            matchIds: dehydratedState.matchIds,
-            matches,
-            matchesById: this.#mergeMatches(s.matchesById, matches)
+            ...match,
+            ...dehydratedMatch
           };
-        });
-      };
-      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)}
+        }
+        return match;
+      });
+      this.__store.setState(s => {
+        return {
+          ...s,
+          matchIds: dehydratedState.matchIds,
+          matches,
+          matchesById: this.#mergeMatches(s.matchesById, matches)
+        };
+      });
+    };
+    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>`;
+        });
+        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
           });
-          return () => this.hydrateData(key);
-        }
-        return () => undefined;
+          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);
+          }
+        });
       };
-      hydrateData = key => {
-        if (typeof document !== 'undefined') {
-          const strKey = typeof key === 'string' ? key : JSON.stringify(key);
-          return window[`__TSR_DEHYDRATED__${strKey}`];
+      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();
         }
-        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;
           }
-          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;
+          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 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 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 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;
-        });
+        // 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)
+        };
       };
-      #parseLocation = previousLocation => {
-        const parse = ({
+      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 prevParams = {
+          ...last(fromMatches)?.params
+        };
+        let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+        if (nextParams) {
+          matches?.map(d => this.getRoute(d.routeId).options.stringifyParams).filter(Boolean).forEach(fn => {
+            nextParams = {
+              ...nextParams,
+              ...fn(nextParams)
+            };
+          });
+        }
+        pathname = interpolatePath(pathname, nextParams ?? {});
+        const preSearchFilters = matches?.map(match => this.getRoute(match.routeId).options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+        const postSearchFilters = matches?.map(match => this.getRoute(match.routeId).options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
+
+        // Pre filters first
+        const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), from.search) : from.search;
+
+        // Then the link/navigate function
+        const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+        : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+        : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
+        : {};
+
+        // Then post filters
+        const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+        const search = replaceEqualDeep(from.search, postFilteredSearch);
+        const searchStr = this.options.stringifySearch(search);
+        const hash = dest.hash === true ? from.hash : dest.hash ? functionalUpdate(dest.hash, from.hash) : from.hash;
+        const hashStr = hash ? `#${hash}` : '';
+        let nextState = dest.state === true ? from.state : dest.state ? functionalUpdate(dest.state, from.state) : from.state;
+        nextState = replaceEqualDeep(from.state, nextState);
+        return {
           pathname,
           search,
+          searchStr,
+          state: nextState,
           hash,
-          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)
-          };
+          href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
+          unmaskOnReload: dest.unmaskOnReload
         };
-        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 prevParams = {
-            ...last(fromMatches)?.params
-          };
-          let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
-          if (nextParams) {
-            matches?.map(d => this.getRoute(d.routeId).options.stringifyParams).filter(Boolean).forEach(fn => {
-              nextParams = {
-                ...nextParams,
-                ...fn(nextParams)
-              };
-            });
-          }
-          pathname = interpolatePath(pathname, nextParams ?? {});
-          const preSearchFilters = matches?.map(match => this.getRoute(match.routeId).options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
-          const postSearchFilters = matches?.map(match => this.getRoute(match.routeId).options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
-
-          // Pre filters first
-          const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), from.search) : from.search;
-
-          // Then the link/navigate function
-          const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-          : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
-          : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
-          : {};
-
-          // Then post filters
-          const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-          const search = replaceEqualDeep(from.search, postFilteredSearch);
-          const searchStr = this.options.stringifySearch(search);
-          const hash = dest.hash === true ? from.hash : dest.hash ? functionalUpdate(dest.hash, from.hash) : from.hash;
-          const hashStr = hash ? `#${hash}` : '';
-          let nextState = dest.state === true ? from.state : dest.state ? functionalUpdate(dest.state, from.state) : from.state;
-          nextState = replaceEqualDeep(from.state, nextState);
-          return {
-            pathname,
-            search,
-            searchStr,
-            state: nextState,
-            hash,
-            href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
-            unmaskOnReload: dest.unmaskOnReload
-          };
-        };
-        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;
+      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 (foundMask) {
-              foundMask = {
-                ...foundMask,
-                from: interpolatePath(foundMask.from, params)
-              };
-              maskedDest = foundMask;
-              maskedNext = build(maskedDest);
+            if (match) {
+              params = match;
+              return true;
             }
-          }
-          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 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 buildWithMatches(opts);
+        return final;
       };
-      #buildAndCommitLocation = ({
-        replace,
-        resetScroll,
-        ...rest
-      } = {}) => {
-        const location = this.buildLocation(rest);
-        return this.#commitLocation({
-          ...location,
-          replace,
-          resetScroll
+      if (opts.mask) {
+        return buildWithMatches(opts, {
+          ...pick(opts, ['from']),
+          ...opts.mask
         });
-      };
-      #commitLocation = async next => {
-        if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
-        let nextAction = 'replace';
-        if (!next.replace) {
-          nextAction = 'push';
-        }
-        const isSameUrl = this.state.location.href === next.href;
-        if (isSameUrl) {
-          nextAction = '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
-                }
+      }
+      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);
+      let nextAction = 'replace';
+      if (!next.replace) {
+        nextAction = 'push';
+      }
+      const isSameUrl = this.state.location.href === next.href;
+      if (isSameUrl) {
+        nextAction = '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;
           }
+        };
+        if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
+          nextHistory.state.__tempKey = this.tempLocationKey;
         }
-        this.history[nextAction === 'push' ? 'push' : 'replace'](nextHistory.href, nextHistory.state);
-        this.resetNextScroll = next.resetScroll ?? true;
-        return this.latestLoadPromise;
-      };
-      getRouteMatch = id => {
-        return this.state.matchesById[id];
-      };
-      setRouteMatch = (id, updater) => {
-        this.__store.setState(prev => {
-          if (!prev.matchesById[id]) {
-            return prev;
+      }
+      this.history[nextAction === 'push' ? 'push' : 'replace'](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])
           }
-          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 => ({
+        };
+      });
+    };
+    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,
-          error: undefined,
-          status: 'success',
-          isFetching: false,
-          updatedAt: updatedAt,
-          loaderData: functionalUpdate(updater, s.loaderData),
-          preloadMaxAge,
-          maxAge
+          invalid: true
         }));
-      };
-      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
-                }));
-              }
-            });
+        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
           });
         }
-        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;
+      } 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;
     }
-    function isRedirect(obj) {
-      return !!obj?.isRedirect;
+    if (opts?.preload) {
+      return match.preloadMaxAge < 0 ? false : match.updatedAt + match.preloadMaxAge < now;
     }
-    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
+    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));
+            }
+          };
+        })();
+      }
     }
-
-    // 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);
-      };
+    const {
+      history
+    } = window;
+    if (history.scrollRestoration) {
+      history.scrollRestoration = 'manual';
     }
-    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;
+    const onScroll = event => {
+      const restoreKey = getKey(router.state.resolvedLocation);
+      if (!weakScrolledElementsByRestoreKey[restoreKey]) {
+        weakScrolledElementsByRestoreKey[restoreKey] = new WeakSet();
       }
-      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 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 {
-        history
-      } = window;
-      if (history.scrollRestoration) {
-        history.scrollRestoration = 'manual';
+    };
+    const getCssSelector = el => {
+      let path = [],
+        parent;
+      while (parent = el.parentNode) {
+        path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`);
+        el = parent;
       }
-      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);
+      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();
-      };
+    };
+    const onPathChange = () => {
+      pathDidChange = true;
+    };
+    if (typeof document !== 'undefined') {
+      document.addEventListener('scroll', onScroll, true);
     }
-    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;
-              }
+    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);
-        }
       }
-    }
-
-    function defer(_promise) {
-      const promise = _promise;
-      if (!promise.__deferredState) {
-        promise.__deferredState = {
-          uid: Math.random().toString(36).slice(2),
-          status: 'pending'
-        };
-        const state = promise.__deferredState;
-        promise.then(data => {
-          state.status = 'success';
-          state.data = data;
-        }).catch(error => {
-          state.status = 'error';
-          state.error = error;
-        });
+      if (!windowRestored) {
+        window.scrollTo(0, 0);
       }
-      return promise;
     }
-    function isDehydratedDeferred(obj) {
-      return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+  }
+
+  function defer(_promise) {
+    const promise = _promise;
+    if (!promise.__deferredState) {
+      promise.__deferredState = {
+        uid: Math.random().toString(36).slice(2),
+        status: 'pending'
+      };
+      const state = promise.__deferredState;
+      promise.then(data => {
+        state.status = 'success';
+        state.data = data;
+      }).catch(error => {
+        state.status = 'error';
+        state.error = error;
+      });
     }
-
-    exports.FileRoute = FileRoute;
-    exports.PathParamError = PathParamError;
-    exports.RootRoute = RootRoute;
-    exports.Route = Route;
-    exports.Router = Router;
-    exports.RouterContext = RouterContext;
-    exports.SearchParamError = SearchParamError;
-    exports.cleanPath = cleanPath;
-    exports.componentTypes = componentTypes;
-    exports.createBrowserHistory = createBrowserHistory;
-    exports.createHashHistory = createHashHistory;
-    exports.createMemoryHistory = createMemoryHistory;
-    exports.createRouteMask = createRouteMask;
-    exports.decode = decode;
-    exports.defaultParseSearch = defaultParseSearch;
-    exports.defaultStringifySearch = defaultStringifySearch;
-    exports.defer = defer;
-    exports.encode = encode;
-    exports.functionalUpdate = functionalUpdate;
-    exports.interpolatePath = interpolatePath;
-    exports.invariant = invariant;
-    exports.isDehydratedDeferred = isDehydratedDeferred;
-    exports.isMatchInvalid = isMatchInvalid;
-    exports.isPlainObject = isPlainObject;
-    exports.isRedirect = isRedirect;
-    exports.joinPaths = joinPaths;
-    exports.last = last;
-    exports.lazyFn = lazyFn;
-    exports.matchByPath = matchByPath;
-    exports.matchPathname = matchPathname;
-    exports.parsePathname = parsePathname;
-    exports.parseSearchWith = parseSearchWith;
-    exports.partialDeepEqual = partialDeepEqual;
-    exports.pick = pick;
-    exports.redirect = redirect;
-    exports.replaceEqualDeep = replaceEqualDeep;
-    exports.resolvePath = resolvePath;
-    exports.restoreScrollPositions = restoreScrollPositions;
-    exports.rootRouteId = rootRouteId;
-    exports.stringifySearchWith = stringifySearchWith;
-    exports.trimPath = trimPath;
-    exports.trimPathLeft = trimPathLeft;
-    exports.trimPathRight = trimPathRight;
-    exports.warning = warning;
-    exports.watchScrollPositions = watchScrollPositions;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
+    return promise;
+  }
+  function isDehydratedDeferred(obj) {
+    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+  }
+
+  exports.FileRoute = FileRoute;
+  exports.PathParamError = PathParamError;
+  exports.RootRoute = RootRoute;
+  exports.Route = Route;
+  exports.Router = Router;
+  exports.RouterContext = RouterContext;
+  exports.SearchParamError = SearchParamError;
+  exports.cleanPath = cleanPath;
+  exports.componentTypes = componentTypes;
+  exports.createBrowserHistory = createBrowserHistory;
+  exports.createHashHistory = createHashHistory;
+  exports.createMemoryHistory = createMemoryHistory;
+  exports.createRouteMask = createRouteMask;
+  exports.decode = decode;
+  exports.defaultParseSearch = defaultParseSearch;
+  exports.defaultStringifySearch = defaultStringifySearch;
+  exports.defer = defer;
+  exports.encode = encode;
+  exports.functionalUpdate = functionalUpdate;
+  exports.interpolatePath = interpolatePath;
+  exports.invariant = invariant;
+  exports.isDehydratedDeferred = isDehydratedDeferred;
+  exports.isMatchInvalid = isMatchInvalid;
+  exports.isPlainObject = isPlainObject;
+  exports.isRedirect = isRedirect;
+  exports.joinPaths = joinPaths;
+  exports.last = last;
+  exports.lazyFn = lazyFn;
+  exports.matchByPath = matchByPath;
+  exports.matchPathname = matchPathname;
+  exports.parsePathname = parsePathname;
+  exports.parseSearchWith = parseSearchWith;
+  exports.partialDeepEqual = partialDeepEqual;
+  exports.pick = pick;
+  exports.redirect = redirect;
+  exports.replaceEqualDeep = replaceEqualDeep;
+  exports.resolvePath = resolvePath;
+  exports.restoreScrollPositions = restoreScrollPositions;
+  exports.rootRouteId = rootRouteId;
+  exports.stringifySearchWith = stringifySearchWith;
+  exports.trimPath = trimPath;
+  exports.trimPathLeft = trimPathLeft;
+  exports.trimPathRight = trimPathRight;
+  exports.warning = warning;
+  exports.watchScrollPositions = watchScrollPositions;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
 //# sourceMappingURL=index.development.js.map