@tanstack/react-router 1.45.0 → 1.45.3

package/dist/esm/router.js

@@ -1,11 +1,10 @@
-import { createBrowserHistory, createMemoryHistory } from "@tanstack/history";
+import { createMemoryHistory, createBrowserHistory } from "@tanstack/history";
 import { Store } from "@tanstack/react-store";
 import invariant from "tiny-invariant";
 import warning from "tiny-warning";
 import { rootRouteId } from "./root.js";
 import { defaultStringifySearch, defaultParseSearch } from "./searchParams.js";
-import { createControlledPromise, replaceEqualDeep, pick, last, deepEqual, functionalUpdate } from "./utils.js";
-import { getRouteMatch } from "./RouterProvider.js";
+import { createControlledPromise, replaceEqualDeep, pick, deepEqual, last, functionalUpdate } from "./utils.js";
 import { trimPath, trimPathLeft, parsePathname, resolvePath, cleanPath, matchPathname, trimPathRight, interpolatePath, joinPaths } from "./path.js";
 import { isResolvedRedirect, isRedirect } from "./redirects.js";
 import { isNotFound } from "./not-found.js";
@@ -28,9 +27,7 @@ class Router {
     )}`;
     this.resetNextScroll = true;
     this.shouldViewTransition = void 0;
-    this.latestLoadPromise = Promise.resolve();
     this.subscribers = /* @__PURE__ */ new Set();
-    this.isServer = typeof document === "undefined";
     this.startReactTransition = (fn) => fn();
     this.update = (newOptions) => {
       if (newOptions.notFoundRoute) {
@@ -43,6 +40,7 @@ class Router {
         ...this.options,
         ...newOptions
       };
+      this.isServer = this.options.isServer ?? typeof document === "undefined";
       if (!this.basepath || newOptions.basepath && newOptions.basepath !== previousOptions.basepath) {
         if (newOptions.basepath === void 0 || newOptions.basepath === "" || newOptions.basepath === "/") {
           this.basepath = "/";
@@ -54,9 +52,9 @@ class Router {
         // eslint-disable-next-line ts/no-unnecessary-condition
         !this.history || this.options.history && this.options.history !== this.history
       ) {
-        this.history = this.options.history ?? (typeof document !== "undefined" ? createBrowserHistory() : createMemoryHistory({
-          initialEntries: [this.options.basepath || "/"]
-        }));
+        this.history = this.options.history ?? (this.isServer ? createMemoryHistory({
+          initialEntries: [this.basepath || "/"]
+        }) : createBrowserHistory());
         this.latestLocation = this.parseLocation();
       }
       if (this.options.routeTree !== this.routeTree) {
@@ -170,11 +168,6 @@ class Router {
         }
       });
     };
-    this.checkLatest = (promise) => {
-      if (this.latestLoadPromise !== promise) {
-        throw this.latestLoadPromise;
-      }
-    };
     this.parseLocation = (previousLocation) => {
       const parse = ({
         pathname,
@@ -326,7 +319,7 @@ class Router {
           params: routeParams,
           leaveWildcards: true
         }) + loaderDepsHash;
-        const existingMatch = getRouteMatch(this.state, matchId);
+        const existingMatch = this.getMatch(matchId);
         const cause = this.state.matches.find((d) => d.id === matchId) ? "stay" : "enter";
         let match;
         if (existingMatch) {
@@ -336,11 +329,7 @@ class Router {
             params: routeParams
           };
         } else {
-          const status = route.options.loader || route.options.beforeLoad ? "pending" : "success";
-          const loadPromise = createControlledPromise();
-          if (status === "success") {
-            loadPromise.resolve();
-          }
+          const status = route.options.loader || route.options.beforeLoad || route.lazyFn ? "pending" : "success";
           match = {
             id: matchId,
             index,
@@ -350,12 +339,10 @@ class Router {
             updatedAt: Date.now(),
             search: {},
             searchError: void 0,
-            status: "pending",
+            status,
             isFetching: false,
             error: void 0,
             paramsError: parseErrors[index],
-            loaderPromise: Promise.resolve(),
-            loadPromise,
             routeContext: void 0,
             context: void 0,
             abortController: new AbortController(),
@@ -366,7 +353,8 @@ class Router {
             preload: false,
             links: (_d = (_c = route.options).links) == null ? void 0 : _d.call(_c),
             scripts: (_f = (_e = route.options).scripts) == null ? void 0 : _f.call(_e),
-            staticData: route.options.staticData || {}
+            staticData: route.options.staticData || {},
+            loadPromise: createControlledPromise()
           };
         }
         if (match.status === "success") {
@@ -391,7 +379,7 @@ class Router {
     };
     this.cancelMatch = (id) => {
       var _a;
-      (_a = getRouteMatch(this.state, id)) == null ? void 0 : _a.abortController.abort();
+      (_a = this.getMatch(id)) == null ? void 0 : _a.abortController.abort();
     };
     this.cancelMatches = () => {
       var _a;
@@ -515,8 +503,7 @@ class Router {
       }
       return buildWithMatches(opts);
     };
-    this.commitLocation = async ({
-      startTransition,
+    this.commitLocation = ({
       viewTransition,
       ignoreBlocker,
       ...next
@@ -528,6 +515,10 @@ class Router {
         return isEqual;
       };
       const isSameUrl = this.latestLocation.href === next.href;
+      const previousCommitPromise = this.commitLocationPromise;
+      this.commitLocationPromise = createControlledPromise(() => {
+        previousCommitPromise == null ? void 0 : previousCommitPromise.resolve();
+      });
       if (isSameUrl && isSameState()) {
         this.load();
       } else {
@@ -562,12 +553,14 @@ class Router {
         );
       }
       this.resetNextScroll = next.resetScroll ?? true;
-      return this.latestLoadPromise;
+      if (!this.history.subscribers.size) {
+        this.load();
+      }
+      return this.commitLocationPromise;
     };
     this.buildAndCommitLocation = ({
       replace,
       resetScroll,
-      startTransition,
       viewTransition,
       ignoreBlocker,
       ...rest
@@ -575,7 +568,6 @@ class Router {
       const location = this.buildLocation(rest);
       return this.commitLocation({
         ...location,
-        startTransition,
         viewTransition,
         replace,
         resetScroll,
@@ -592,7 +584,7 @@ class Router {
       }
       invariant(
         !isExternal,
-        "Attempting to navigate to external url with this.navigate!"
+        "Attempting to navigate to external url with router.navigate!"
       );
       return this.buildAndCommitLocation({
         ...rest,
@@ -603,127 +595,162 @@ class Router {
     };
     this.load = async () => {
       this.latestLocation = this.parseLocation(this.latestLocation);
-      if (this.state.location === this.latestLocation) {
-        return;
-      }
-      const promise = createControlledPromise();
-      this.latestLoadPromise = promise;
+      this.__store.setState((s) => ({
+        ...s,
+        loadedAt: Date.now()
+      }));
       let redirect;
       let notFound;
-      this.startReactTransition(async () => {
-        try {
-          const next = this.latestLocation;
-          const prevLocation = this.state.resolvedLocation;
-          const pathDidChange = prevLocation.href !== next.href;
-          this.cancelMatches();
-          let pendingMatches;
-          this.__store.batch(() => {
-            pendingMatches = this.matchRoutes(next.pathname, next.search);
-            this.__store.setState((s) => ({
-              ...s,
-              status: "pending",
-              isLoading: true,
-              location: next,
-              pendingMatches,
-              // If a cached moved to pendingMatches, remove it from cachedMatches
-              cachedMatches: s.cachedMatches.filter((d) => {
-                return !pendingMatches.find((e) => e.id === d.id);
-              })
-            }));
-          });
-          if (!this.state.redirect) {
+      const loadPromise = new Promise((resolve) => {
+        this.startReactTransition(async () => {
+          var _a;
+          try {
+            const next = this.latestLocation;
+            const prevLocation = this.state.resolvedLocation;
+            const pathDidChange = prevLocation.href !== next.href;
+            this.cancelMatches();
+            let pendingMatches;
+            this.__store.batch(() => {
+              pendingMatches = this.matchRoutes(next.pathname, next.search);
+              this.__store.setState((s) => ({
+                ...s,
+                status: "pending",
+                isLoading: true,
+                location: next,
+                pendingMatches,
+                // If a cached moved to pendingMatches, remove it from cachedMatches
+                cachedMatches: s.cachedMatches.filter((d) => {
+                  return !pendingMatches.find((e) => e.id === d.id);
+                })
+              }));
+            });
+            if (!this.state.redirect) {
+              this.emit({
+                type: "onBeforeNavigate",
+                fromLocation: prevLocation,
+                toLocation: next,
+                pathChanged: pathDidChange
+              });
+            }
             this.emit({
-              type: "onBeforeNavigate",
+              type: "onBeforeLoad",
               fromLocation: prevLocation,
               toLocation: next,
               pathChanged: pathDidChange
             });
-          }
-          this.emit({
-            type: "onBeforeLoad",
-            fromLocation: prevLocation,
-            toLocation: next,
-            pathChanged: pathDidChange
-          });
-          await this.loadMatches({
-            matches: pendingMatches,
-            location: next,
-            checkLatest: () => this.checkLatest(promise),
-            onReady: async () => {
-              await this.startViewTransition(async () => {
-                let exitingMatches;
-                let enteringMatches;
-                let stayingMatches;
-                this.__store.batch(() => {
-                  this.__store.setState((s) => {
-                    const previousMatches = s.matches;
-                    const newMatches = s.pendingMatches || s.matches;
-                    exitingMatches = previousMatches.filter(
-                      (match) => !newMatches.find((d) => d.id === match.id)
-                    );
-                    enteringMatches = newMatches.filter(
-                      (match) => !previousMatches.find((d) => d.id === match.id)
-                    );
-                    stayingMatches = previousMatches.filter(
-                      (match) => newMatches.find((d) => d.id === match.id)
-                    );
-                    return {
-                      ...s,
-                      isLoading: false,
-                      matches: newMatches,
-                      pendingMatches: void 0,
-                      cachedMatches: [
-                        ...s.cachedMatches,
-                        ...exitingMatches.filter((d) => d.status !== "error")
-                      ]
-                    };
+            await this.loadMatches({
+              matches: pendingMatches,
+              location: next,
+              // eslint-disable-next-line ts/require-await
+              onReady: async () => {
+                this.startViewTransition(async () => {
+                  let exitingMatches;
+                  let enteringMatches;
+                  let stayingMatches;
+                  this.__store.batch(() => {
+                    this.__store.setState((s) => {
+                      const previousMatches = s.matches;
+                      const newMatches = s.pendingMatches || s.matches;
+                      exitingMatches = previousMatches.filter(
+                        (match) => !newMatches.find((d) => d.id === match.id)
+                      );
+                      enteringMatches = newMatches.filter(
+                        (match) => !previousMatches.find((d) => d.id === match.id)
+                      );
+                      stayingMatches = previousMatches.filter(
+                        (match) => newMatches.find((d) => d.id === match.id)
+                      );
+                      return {
+                        ...s,
+                        isLoading: false,
+                        matches: newMatches,
+                        pendingMatches: void 0,
+                        cachedMatches: [
+                          ...s.cachedMatches,
+                          ...exitingMatches.filter((d) => d.status !== "error")
+                        ]
+                      };
+                    });
+                    this.cleanCache();
                   });
-                  this.cleanCache();
-                });
-                [
-                  [exitingMatches, "onLeave"],
-                  [enteringMatches, "onEnter"],
-                  [stayingMatches, "onStay"]
-                ].forEach(([matches, hook]) => {
-                  matches.forEach((match) => {
-                    var _a, _b;
-                    (_b = (_a = this.looseRoutesById[match.routeId].options)[hook]) == null ? void 0 : _b.call(_a, match);
+                  [
+                    [exitingMatches, "onLeave"],
+                    [enteringMatches, "onEnter"],
+                    [stayingMatches, "onStay"]
+                  ].forEach(([matches, hook]) => {
+                    matches.forEach((match) => {
+                      var _a2, _b;
+                      (_b = (_a2 = this.looseRoutesById[match.routeId].options)[hook]) == null ? void 0 : _b.call(_a2, match);
+                    });
                   });
                 });
-              });
-            }
-          });
-        } catch (err) {
-          if (isResolvedRedirect(err)) {
-            redirect = err;
-            if (!this.isServer) {
-              this.navigate({ ...err, replace: true, __isRedirect: true });
+              }
+            });
+          } catch (err) {
+            if (isResolvedRedirect(err)) {
+              redirect = err;
+              if (!this.isServer) {
+                this.navigate({ ...err, replace: true, __isRedirect: true });
+              }
+            } else if (isNotFound(err)) {
+              notFound = err;
             }
-          } else if (isNotFound(err)) {
-            notFound = err;
+            this.__store.setState((s) => ({
+              ...s,
+              statusCode: redirect ? redirect.statusCode : notFound ? 404 : s.matches.some((d) => d.status === "error") ? 500 : 200,
+              redirect
+            }));
           }
-          this.__store.setState((s) => ({
-            ...s,
-            statusCode: redirect ? redirect.statusCode : notFound ? 404 : s.matches.some((d) => d.status === "error") ? 500 : 200,
-            redirect
-          }));
-        }
-        promise.resolve();
+          if (this.latestLoadPromise === loadPromise) {
+            (_a = this.commitLocationPromise) == null ? void 0 : _a.resolve();
+            this.latestLoadPromise = void 0;
+            this.commitLocationPromise = void 0;
+          }
+          resolve();
+        });
       });
-      return this.latestLoadPromise;
+      this.latestLoadPromise = loadPromise;
+      await loadPromise;
+      while (this.latestLoadPromise && loadPromise !== this.latestLoadPromise) {
+        await this.latestLoadPromise;
+      }
     };
-    this.startViewTransition = async (fn) => {
+    this.startViewTransition = (fn) => {
       var _a, _b;
       const shouldViewTransition = this.shouldViewTransition ?? this.options.defaultViewTransition;
       delete this.shouldViewTransition;
       ((_b = (_a = shouldViewTransition && typeof document !== "undefined" ? document : void 0) == null ? void 0 : _a.startViewTransition) == null ? void 0 : _b.call(_a, fn)) || fn();
     };
+    this.updateMatch = (id, updater) => {
+      var _a;
+      let updated;
+      const isPending = (_a = this.state.pendingMatches) == null ? void 0 : _a.find((d) => d.id === id);
+      const isMatched = this.state.matches.find((d) => d.id === id);
+      const matchesKey = isPending ? "pendingMatches" : isMatched ? "matches" : "cachedMatches";
+      this.__store.setState((s) => {
+        var _a2;
+        return {
+          ...s,
+          [matchesKey]: (_a2 = s[matchesKey]) == null ? void 0 : _a2.map(
+            (d) => d.id === id ? updated = updater(d) : d
+          )
+        };
+      });
+      return updated;
+    };
+    this.getMatch = (matchId) => {
+      return [
+        ...this.state.cachedMatches,
+        ...this.state.pendingMatches ?? [],
+        ...this.state.matches
+      ].find((d) => d.id === matchId);
+    };
     this.loadMatches = async ({
-      checkLatest,
       location,
       matches,
       preload,
-      onReady
+      onReady,
+      updateMatch = this.updateMatch
     }) => {
       let firstBadMatchIndex;
       let rendered = false;
@@ -736,41 +763,32 @@ class Router {
       if (!this.isServer && !this.state.matches.length) {
         triggerOnReady();
       }
-      const updateMatch = (id, updater, opts) => {
-        var _a;
-        let updated;
-        const isPending = (_a = this.state.pendingMatches) == null ? void 0 : _a.find((d) => d.id === id);
-        const isMatched = this.state.matches.find((d) => d.id === id);
-        const matchesKey = isPending ? "pendingMatches" : isMatched ? "matches" : "cachedMatches";
-        this.__store.setState((s) => {
-          var _a2;
-          return {
-            ...s,
-            [matchesKey]: (_a2 = s[matchesKey]) == null ? void 0 : _a2.map(
-              (d) => d.id === id ? updated = updater(d) : d
-            )
-          };
-        });
-        return updated;
-      };
       const handleRedirectAndNotFound = (match, err) => {
+        var _a, _b, _c;
         if (isResolvedRedirect(err)) throw err;
         if (isRedirect(err) || isNotFound(err)) {
           updateMatch(match.id, (prev) => ({
             ...prev,
             status: isRedirect(err) ? "redirected" : isNotFound(err) ? "notFound" : "error",
             isFetching: false,
-            error: err
+            error: err,
+            beforeLoadPromise: void 0,
+            loaderPromise: void 0
           }));
           if (!err.routeId) {
             err.routeId = match.routeId;
           }
+          (_a = match.beforeLoadPromise) == null ? void 0 : _a.resolve();
+          (_b = match.loaderPromise) == null ? void 0 : _b.resolve();
+          (_c = match.loadPromise) == null ? void 0 : _c.resolve();
           if (isRedirect(err)) {
             rendered = true;
             err = this.resolveRedirect({ ...err, _fromLocation: location });
             throw err;
           } else if (isNotFound(err)) {
-            this.handleNotFound(matches, err);
+            this._handleNotFound(matches, err, {
+              updateMatch
+            });
             throw err;
           }
         }
@@ -779,268 +797,293 @@ class Router {
         await new Promise((resolveAll, rejectAll) => {
           ;
           (async () => {
+            var _a, _b, _c;
             try {
-              for (let [index, match] of matches.entries()) {
-                const parentMatch = matches[index - 1];
-                const route = this.looseRoutesById[match.routeId];
-                const abortController = new AbortController();
-                let loadPromise = match.loadPromise;
-                const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-                const shouldPending = !!(onReady && !this.isServer && !preload && (route.options.loader || route.options.beforeLoad) && typeof pendingMs === "number" && pendingMs !== Infinity && (route.options.pendingComponent ?? this.options.defaultPendingComponent));
-                if (shouldPending) {
-                  setTimeout(() => {
-                    try {
-                      checkLatest();
-                      triggerOnReady();
-                    } catch {
-                    }
-                  }, pendingMs);
+              const handleSerialError = (index, err, routerCode) => {
+                var _a2, _b2;
+                const { id: matchId, routeId } = matches[index];
+                const route = this.looseRoutesById[routeId];
+                if (err instanceof Promise) {
+                  throw err;
                 }
-                if (match.isFetching) {
-                  continue;
+                err.routerCode = routerCode;
+                firstBadMatchIndex = firstBadMatchIndex ?? index;
+                handleRedirectAndNotFound(this.getMatch(matchId), err);
+                try {
+                  (_b2 = (_a2 = route.options).onError) == null ? void 0 : _b2.call(_a2, err);
+                } catch (errorHandlerErr) {
+                  err = errorHandlerErr;
+                  handleRedirectAndNotFound(this.getMatch(matchId), err);
                 }
-                const previousResolve = loadPromise.resolve;
-                loadPromise = createControlledPromise(
-                  // Resolve the old when we we resolve the new one
-                  previousResolve
-                );
-                matches[index] = match = updateMatch(match.id, (prev) => ({
-                  ...prev,
-                  isFetching: "beforeLoad",
-                  loadPromise
-                }));
-                const handleSerialError = (err, routerCode) => {
-                  var _a, _b;
-                  if (err instanceof Promise) {
-                    throw err;
-                  }
-                  err.routerCode = routerCode;
-                  firstBadMatchIndex = firstBadMatchIndex ?? index;
-                  handleRedirectAndNotFound(match, err);
-                  try {
-                    (_b = (_a = route.options).onError) == null ? void 0 : _b.call(_a, err);
-                  } catch (errorHandlerErr) {
-                    err = errorHandlerErr;
-                    handleRedirectAndNotFound(match, err);
-                  }
-                  matches[index] = match = updateMatch(match.id, () => ({
-                    ...match,
+                updateMatch(matchId, (prev) => {
+                  var _a3;
+                  (_a3 = prev.beforeLoadPromise) == null ? void 0 : _a3.resolve();
+                  return {
+                    ...prev,
                     error: err,
                     status: "error",
+                    isFetching: false,
                     updatedAt: Date.now(),
-                    abortController: new AbortController()
-                  }));
-                };
-                if (match.paramsError) {
-                  handleSerialError(match.paramsError, "PARSE_PARAMS");
-                }
-                if (match.searchError) {
-                  handleSerialError(match.searchError, "VALIDATE_SEARCH");
-                }
-                try {
-                  const parentContext = (parentMatch == null ? void 0 : parentMatch.context) ?? this.options.context ?? {};
-                  matches[index] = match = {
-                    ...match,
-                    routeContext: replaceEqualDeep(
-                      match.routeContext,
-                      parentContext
-                    ),
-                    context: replaceEqualDeep(match.context, parentContext),
-                    abortController
+                    abortController: new AbortController(),
+                    beforeLoadPromise: void 0
                   };
-                  const beforeLoadFnContext = {
-                    search: match.search,
-                    abortController,
-                    params: match.params,
-                    preload: !!preload,
-                    context: match.routeContext,
-                    location,
-                    navigate: (opts) => this.navigate({ ...opts, _fromLocation: location }),
-                    buildLocation: this.buildLocation,
-                    cause: preload ? "preload" : match.cause
-                  };
-                  const beforeLoadContext = route.options.beforeLoad ? await route.options.beforeLoad(beforeLoadFnContext) ?? {} : {};
-                  checkLatest();
-                  if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
-                    handleSerialError(beforeLoadContext, "BEFORE_LOAD");
+                });
+              };
+              for (const [index, { id: matchId, routeId }] of matches.entries()) {
+                const existingMatch = this.getMatch(matchId);
+                if (
+                  // If we are in the middle of a load, either of these will be present
+                  // (not to be confused with `loadPromise`, which is always defined)
+                  existingMatch.beforeLoadPromise || existingMatch.loaderPromise
+                ) {
+                  await existingMatch.beforeLoadPromise;
+                } else {
+                  try {
+                    updateMatch(matchId, (prev) => ({
+                      ...prev,
+                      loadPromise: createControlledPromise(() => {
+                        var _a2;
+                        (_a2 = prev.loadPromise) == null ? void 0 : _a2.resolve();
+                      }),
+                      beforeLoadPromise: createControlledPromise()
+                    }));
+                    const route = this.looseRoutesById[routeId];
+                    const abortController = new AbortController();
+                    const parentMatchId = (_a = matches[index - 1]) == null ? void 0 : _a.id;
+                    const getParentContext = () => {
+                      if (!parentMatchId) {
+                        return this.options.context ?? {};
+                      }
+                      return this.getMatch(parentMatchId).context ?? this.options.context ?? {};
+                    };
+                    const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+                    const shouldPending = !!(onReady && !this.isServer && !preload && (route.options.loader || route.options.beforeLoad) && typeof pendingMs === "number" && pendingMs !== Infinity && (route.options.pendingComponent ?? this.options.defaultPendingComponent));
+                    if (shouldPending) {
+                      setTimeout(() => {
+                        try {
+                          triggerOnReady();
+                        } catch {
+                        }
+                      }, pendingMs);
+                    }
+                    const { paramsError, searchError } = this.getMatch(matchId);
+                    if (paramsError) {
+                      handleSerialError(index, paramsError, "PARSE_PARAMS");
+                    }
+                    if (searchError) {
+                      handleSerialError(index, searchError, "VALIDATE_SEARCH");
+                    }
+                    const parentContext = getParentContext();
+                    updateMatch(matchId, (prev) => ({
+                      ...prev,
+                      isFetching: "beforeLoad",
+                      fetchCount: prev.fetchCount + 1,
+                      routeContext: replaceEqualDeep(
+                        prev.routeContext,
+                        parentContext
+                      ),
+                      context: replaceEqualDeep(prev.context, parentContext),
+                      abortController
+                    }));
+                    const { search, params, routeContext, cause } = this.getMatch(matchId);
+                    const beforeLoadFnContext = {
+                      search,
+                      abortController,
+                      params,
+                      preload: !!preload,
+                      context: routeContext,
+                      location,
+                      navigate: (opts) => this.navigate({ ...opts, _fromLocation: location }),
+                      buildLocation: this.buildLocation,
+                      cause: preload ? "preload" : cause
+                    };
+                    const beforeLoadContext = await ((_c = (_b = route.options).beforeLoad) == null ? void 0 : _c.call(_b, beforeLoadFnContext)) ?? {};
+                    if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
+                      handleSerialError(index, beforeLoadContext, "BEFORE_LOAD");
+                    }
+                    updateMatch(matchId, (prev) => {
+                      const routeContext2 = {
+                        ...prev.routeContext,
+                        ...beforeLoadContext
+                      };
+                      return {
+                        ...prev,
+                        routeContext: replaceEqualDeep(
+                          prev.routeContext,
+                          routeContext2
+                        ),
+                        context: replaceEqualDeep(prev.context, routeContext2),
+                        abortController
+                      };
+                    });
+                  } catch (err) {
+                    handleSerialError(index, err, "BEFORE_LOAD");
                   }
-                  const context = {
-                    ...parentContext,
-                    ...beforeLoadContext
-                  };
-                  matches[index] = match = {
-                    ...match,
-                    routeContext: replaceEqualDeep(
-                      match.routeContext,
-                      beforeLoadContext
-                    ),
-                    context: replaceEqualDeep(match.context, context),
-                    abortController
-                  };
-                  updateMatch(match.id, () => match);
-                } catch (err) {
-                  handleSerialError(err, "BEFORE_LOAD");
-                  break;
+                  updateMatch(matchId, (prev) => {
+                    var _a2;
+                    (_a2 = prev.beforeLoadPromise) == null ? void 0 : _a2.resolve();
+                    return {
+                      ...prev,
+                      beforeLoadPromise: void 0,
+                      isFetching: false
+                    };
+                  });
                 }
               }
-              checkLatest();
               const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
               const matchPromises = [];
-              validResolvedMatches.forEach((match, index) => {
-                const createValidateResolvedMatchPromise = async () => {
-                  const parentMatchPromise = matchPromises[index - 1];
-                  const route = this.looseRoutesById[match.routeId];
-                  const loaderContext = {
-                    params: match.params,
-                    deps: match.loaderDeps,
-                    preload: !!preload,
-                    parentMatchPromise,
-                    abortController: match.abortController,
-                    context: match.context,
-                    location,
-                    navigate: (opts) => this.navigate({ ...opts, _fromLocation: location }),
-                    cause: preload ? "preload" : match.cause,
-                    route
-                  };
-                  const fetchAndResolveInLoaderLifetime = async () => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-                    const existing = getRouteMatch(this.state, match.id);
-                    let lazyPromise = Promise.resolve();
-                    let componentsPromise = Promise.resolve();
-                    let loaderPromise = existing.loaderPromise;
-                    const potentialPendingMinPromise = async () => {
-                      const latestMatch = getRouteMatch(this.state, match.id);
-                      if (latestMatch == null ? void 0 : latestMatch.minPendingPromise) {
-                        await latestMatch.minPendingPromise;
-                        checkLatest();
-                        updateMatch(latestMatch.id, (prev) => ({
-                          ...prev,
-                          minPendingPromise: void 0
-                        }));
-                      }
-                    };
-                    try {
-                      if (match.isFetching === "beforeLoad") {
-                        matches[index] = match = updateMatch(
-                          match.id,
-                          (prev) => ({
-                            ...prev,
-                            isFetching: "loader",
-                            fetchCount: match.fetchCount + 1
-                          })
-                        );
-                        lazyPromise = ((_a = route.lazyFn) == null ? void 0 : _a.call(route).then((lazyRoute) => {
-                          Object.assign(route.options, lazyRoute.options);
-                        })) || Promise.resolve();
-                        componentsPromise = lazyPromise.then(
-                          () => Promise.all(
-                            componentTypes.map(async (type) => {
-                              const component = route.options[type];
-                              if (component == null ? void 0 : component.preload) {
-                                await component.preload();
-                              }
-                            })
-                          )
-                        );
-                        await lazyPromise;
-                        checkLatest();
-                        loaderPromise = (_c = (_b = route.options).loader) == null ? void 0 : _c.call(_b, loaderContext);
-                        matches[index] = match = updateMatch(
-                          match.id,
-                          (prev) => ({
-                            ...prev,
-                            loaderPromise
-                          })
-                        );
-                      }
-                      let loaderData = await loaderPromise;
-                      if (this.serializeLoaderData) {
-                        loaderData = this.serializeLoaderData(loaderData, {
-                          router: this,
-                          match
-                        });
-                      }
-                      checkLatest();
-                      handleRedirectAndNotFound(match, loaderData);
-                      await potentialPendingMinPromise();
-                      checkLatest();
-                      const meta = (_e = (_d = route.options).meta) == null ? void 0 : _e.call(_d, {
-                        matches,
-                        match,
-                        params: match.params,
-                        loaderData
-                      });
-                      const headers = (_g = (_f = route.options).headers) == null ? void 0 : _g.call(_f, {
-                        loaderData
-                      });
-                      matches[index] = match = updateMatch(match.id, (prev) => ({
+              validResolvedMatches.forEach(({ id: matchId, routeId }, index) => {
+                matchPromises.push(
+                  (async () => {
+                    const { loaderPromise: prevLoaderPromise } = this.getMatch(matchId);
+                    if (prevLoaderPromise) {
+                      await prevLoaderPromise;
+                    } else {
+                      const parentMatchPromise = matchPromises[index - 1];
+                      const route = this.looseRoutesById[routeId];
+                      const getLoaderContext = () => {
+                        const {
+                          params,
+                          loaderDeps,
+                          abortController,
+                          context,
+                          cause
+                        } = this.getMatch(matchId);
+                        return {
+                          params,
+                          deps: loaderDeps,
+                          preload: !!preload,
+                          parentMatchPromise,
+                          abortController,
+                          context,
+                          location,
+                          navigate: (opts) => this.navigate({ ...opts, _fromLocation: location }),
+                          cause: preload ? "preload" : cause,
+                          route
+                        };
+                      };
+                      const age = Date.now() - this.getMatch(matchId).updatedAt;
+                      const staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 3e4 : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
+                      const shouldReloadOption = route.options.shouldReload;
+                      const shouldReload = typeof shouldReloadOption === "function" ? shouldReloadOption(getLoaderContext()) : shouldReloadOption;
+                      updateMatch(matchId, (prev) => ({
                         ...prev,
-                        error: void 0,
-                        status: "success",
-                        isFetching: false,
-                        updatedAt: Date.now(),
-                        loaderData,
-                        meta,
-                        headers
+                        loaderPromise: createControlledPromise(),
+                        preload: !!preload && !this.state.matches.find((d) => d.id === matchId)
                       }));
-                    } catch (e) {
-                      checkLatest();
-                      let error = e;
-                      await potentialPendingMinPromise();
-                      checkLatest();
-                      handleRedirectAndNotFound(match, e);
-                      try {
-                        (_i = (_h = route.options).onError) == null ? void 0 : _i.call(_h, e);
-                      } catch (onErrorError) {
-                        error = onErrorError;
-                        handleRedirectAndNotFound(match, onErrorError);
+                      const runLoader = async () => {
+                        var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+                        try {
+                          const potentialPendingMinPromise = async () => {
+                            const latestMatch = this.getMatch(matchId);
+                            if (latestMatch.minPendingPromise) {
+                              await latestMatch.minPendingPromise;
+                            }
+                          };
+                          try {
+                            route._lazyPromise = route._lazyPromise || (route.lazyFn ? route.lazyFn().then((lazyRoute) => {
+                              Object.assign(
+                                route.options,
+                                lazyRoute.options
+                              );
+                            }) : Promise.resolve());
+                            const componentsPromise = this.getMatch(matchId).componentsPromise || route._lazyPromise.then(
+                              () => Promise.all(
+                                componentTypes.map(async (type) => {
+                                  const component = route.options[type];
+                                  if (component == null ? void 0 : component.preload) {
+                                    await component.preload();
+                                  }
+                                })
+                              )
+                            );
+                            updateMatch(matchId, (prev) => ({
+                              ...prev,
+                              isFetching: "loader",
+                              componentsPromise
+                            }));
+                            await route._lazyPromise;
+                            let loaderData = await ((_b2 = (_a2 = route.options).loader) == null ? void 0 : _b2.call(_a2, getLoaderContext()));
+                            if (this.serializeLoaderData) {
+                              loaderData = this.serializeLoaderData(loaderData, {
+                                router: this,
+                                match: this.getMatch(matchId)
+                              });
+                            }
+                            handleRedirectAndNotFound(
+                              this.getMatch(matchId),
+                              loaderData
+                            );
+                            await potentialPendingMinPromise();
+                            const meta = (_d = (_c2 = route.options).meta) == null ? void 0 : _d.call(_c2, {
+                              matches,
+                              match: this.getMatch(matchId),
+                              params: this.getMatch(matchId).params,
+                              loaderData
+                            });
+                            const headers = (_f = (_e = route.options).headers) == null ? void 0 : _f.call(_e, {
+                              loaderData
+                            });
+                            updateMatch(matchId, (prev) => ({
+                              ...prev,
+                              error: void 0,
+                              status: "success",
+                              isFetching: false,
+                              updatedAt: Date.now(),
+                              loaderData,
+                              meta,
+                              headers
+                            }));
+                          } catch (e) {
+                            let error = e;
+                            await potentialPendingMinPromise();
+                            handleRedirectAndNotFound(this.getMatch(matchId), e);
+                            try {
+                              (_h = (_g = route.options).onError) == null ? void 0 : _h.call(_g, e);
+                            } catch (onErrorError) {
+                              error = onErrorError;
+                              handleRedirectAndNotFound(
+                                this.getMatch(matchId),
+                                onErrorError
+                              );
+                            }
+                            updateMatch(matchId, (prev) => ({
+                              ...prev,
+                              error,
+                              status: "error",
+                              isFetching: false
+                            }));
+                          }
+                          await this.getMatch(matchId).componentsPromise;
+                        } catch (err) {
+                          handleRedirectAndNotFound(this.getMatch(matchId), err);
+                        }
+                      };
+                      const { status, invalid } = this.getMatch(matchId);
+                      if (status === "success" && (invalid || (shouldReload ?? age > staleAge))) {
+                        ;
+                        (async () => {
+                          try {
+                            await runLoader();
+                          } catch (err) {
+                          }
+                        })();
+                      } else if (status !== "success") {
+                        await runLoader();
                       }
-                      matches[index] = match = updateMatch(match.id, (prev) => ({
-                        ...prev,
-                        error,
-                        status: "error",
-                        isFetching: false
-                      }));
+                      const { loaderPromise, loadPromise } = this.getMatch(matchId);
+                      loaderPromise == null ? void 0 : loaderPromise.resolve();
+                      loadPromise == null ? void 0 : loadPromise.resolve();
                     }
-                    await componentsPromise;
-                    checkLatest();
-                    match.loadPromise.resolve();
-                  };
-                  const age = Date.now() - match.updatedAt;
-                  const staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 3e4 : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
-                  const shouldReloadOption = route.options.shouldReload;
-                  const shouldReload = typeof shouldReloadOption === "function" ? shouldReloadOption(loaderContext) : shouldReloadOption;
-                  matches[index] = match = {
-                    ...match,
-                    preload: !!preload && !this.state.matches.find((d) => d.id === match.id)
-                  };
-                  const fetchWithRedirectAndNotFound = async () => {
-                    try {
-                      await fetchAndResolveInLoaderLifetime();
-                    } catch (err) {
-                      checkLatest();
-                      handleRedirectAndNotFound(match, err);
-                    }
-                  };
-                  if (match.status === "success" && (match.invalid || (shouldReload ?? age > staleAge))) {
-                    ;
-                    (async () => {
-                      try {
-                        await fetchWithRedirectAndNotFound();
-                      } catch (err) {
-                      }
-                    })();
-                    return;
-                  }
-                  if (match.status !== "success") {
-                    await fetchWithRedirectAndNotFound();
-                  }
-                  return;
-                };
-                matchPromises.push(createValidateResolvedMatchPromise());
+                    updateMatch(matchId, (prev) => ({
+                      ...prev,
+                      isFetching: false,
+                      loaderPromise: void 0
+                    }));
+                  })()
+                );
               });
               await Promise.all(matchPromises);
-              checkLatest();
               resolveAll();
             } catch (err) {
               rejectAll(err);
@@ -1062,7 +1105,7 @@ class Router {
       const invalidate = (d) => ({
         ...d,
         invalid: true,
-        ...d.status === "error" ? { status: "pending" } : {}
+        ...d.status === "error" ? { status: "pending", error: void 0 } : {}
       });
       this.__store.setState((s) => {
         var _a;
@@ -1120,18 +1163,23 @@ class Router {
           }
         });
       });
-      const leafMatch = last(matches);
-      const currentLeafMatch = last(this.state.matches);
-      const pendingLeafMatch = last(this.state.pendingMatches ?? []);
-      if (leafMatch && ((currentLeafMatch == null ? void 0 : currentLeafMatch.id) === leafMatch.id || (pendingLeafMatch == null ? void 0 : pendingLeafMatch.id) === leafMatch.id)) {
-        return void 0;
-      }
+      const activeMatchIds = new Set(
+        [...this.state.matches, ...this.state.pendingMatches ?? []].map(
+          (d) => d.id
+        )
+      );
       try {
         matches = await this.loadMatches({
           matches,
           location: next,
           preload: true,
-          checkLatest: () => void 0
+          updateMatch: (id, updater) => {
+            if (activeMatchIds.has(id)) {
+              matches = matches.map((d) => d.id === id ? updater(d) : d);
+            } else {
+              this.updateMatch(id, updater);
+            }
+          }
         });
         return matches;
       } catch (err) {
@@ -1199,7 +1247,7 @@ class Router {
         manifest: this.manifest
       };
     };
-    this.hydrate = async () => {
+    this.hydrate = () => {
       var _a, _b, _c;
       let ctx;
       if (typeof document !== "undefined") {
@@ -1272,7 +1320,9 @@ class Router {
         ${children}\`)` : ""}; __TSR__.cleanScripts()<\/script>`
       );
     };
-    this.handleNotFound = (matches, err) => {
+    this._handleNotFound = (matches, err, {
+      updateMatch = this.updateMatch
+    } = {}) => {
       const matchesByRouteId = Object.fromEntries(
         matches.map((match2) => [match2.routeId, match2])
       );
@@ -1286,11 +1336,18 @@ class Router {
       }
       const match = matchesByRouteId[routeCursor.id];
       invariant(match, "Could not find match for route: " + routeCursor.id);
-      Object.assign(match, {
+      updateMatch(match.id, (prev) => ({
+        ...prev,
         status: "notFound",
         error: err,
         isFetching: false
-      });
+      }));
+      if (err.routerCode === "BEFORE_LOAD" && routeCursor.parentRoute) {
+        err.routeId = routeCursor.parentRoute.id;
+        this._handleNotFound(matches, err, {
+          updateMatch
+        });
+      }
     };
     this.hasNotFoundMatch = () => {
       return this.__store.state.matches.some(
@@ -1316,11 +1373,6 @@ class Router {
   get looseRoutesById() {
     return this.routesById;
   }
-  // resolveMatchPromise = (matchId: string, key: string, value: any) => {
-  //   state.matches
-  //     .find((d) => d.id === matchId)
-  //     ?.__promisesByKey[key]?.resolve(value)
-  // }
 }
 function lazyFn(fn, key) {
   return async (...args) => {
@@ -1334,6 +1386,7 @@ class PathParamError extends Error {
 }
 function getInitialRouterState(location) {
   return {
+    loadedAt: 0,
     isLoading: false,
     isTransitioning: false,
     status: "idle",