@tanstack/router-core 1.132.0-alpha.2 → 1.132.0-alpha.20

package/dist/esm/router.js

@@ -1,14 +1,16 @@
 import { Store, batch } from "@tanstack/store";
-import { createMemoryHistory, createBrowserHistory, parseHref } from "@tanstack/history";
+import { createBrowserHistory, parseHref } from "@tanstack/history";
 import invariant from "tiny-invariant";
-import { pick, createControlledPromise, isPromise, deepEqual, replaceEqualDeep, last, functionalUpdate } from "./utils.js";
-import { trimPath, resolvePath, cleanPath, matchPathname, trimPathRight, interpolatePath, joinPaths, trimPathLeft, parsePathname, SEGMENT_TYPE_PARAM, SEGMENT_TYPE_OPTIONAL_PARAM, SEGMENT_TYPE_WILDCARD, SEGMENT_TYPE_PATHNAME } from "./path.js";
+import { createControlledPromise, deepEqual, replaceEqualDeep, last, findLast, functionalUpdate } from "./utils.js";
+import { resolvePath, cleanPath, trimPathRight, trimPath, matchPathname, interpolatePath, trimPathLeft, parsePathname, SEGMENT_TYPE_PARAM, SEGMENT_TYPE_OPTIONAL_PARAM, SEGMENT_TYPE_WILDCARD, SEGMENT_TYPE_PATHNAME } from "./path.js";
 import { isNotFound } from "./not-found.js";
 import { setupScrollRestoration } from "./scroll-restoration.js";
 import { defaultParseSearch, defaultStringifySearch } from "./searchParams.js";
 import { rootRouteId } from "./root.js";
 import { redirect, isRedirect } from "./redirect.js";
 import { createLRUCache } from "./lru-cache.js";
+import { loadMatches, loadRouteChunk, routeNeedsPreload } from "./load-matches.js";
+import { rewriteBasepath, composeRewrites, executeRewriteInput, executeRewriteOutput } from "./rewrite.js";
 function defaultSerializeError(err) {
   if (err instanceof Error) {
     const obj = {
@@ -53,7 +55,6 @@ class RouterCore {
           "The notFoundRoute API is deprecated and will be removed in the next major version. See https://tanstack.com/router/v1/docs/framework/react/guide/not-found-errors#migrating-from-notfoundroute for more info."
         );
       }
-      const previousOptions = this.options;
       this.options = {
         ...this.options,
         ...newOptions
@@ -65,24 +66,43 @@ class RouterCore {
           char
         ])
       ) : void 0;
-      if (!this.basepath || newOptions.basepath && newOptions.basepath !== previousOptions.basepath) {
-        if (newOptions.basepath === void 0 || newOptions.basepath === "" || newOptions.basepath === "/") {
-          this.basepath = "/";
+      if (!this.history || this.options.history && this.options.history !== this.history) {
+        if (!this.options.history) {
+          if (!this.isServer) {
+            this.history = createBrowserHistory();
+          }
         } else {
-          this.basepath = `/${trimPath(newOptions.basepath)}`;
+          this.history = this.options.history;
         }
       }
-      if (!this.history || this.options.history && this.options.history !== this.history) {
-        this.history = this.options.history ?? (this.isServer ? createMemoryHistory({
-          initialEntries: [this.basepath || "/"]
-        }) : createBrowserHistory());
-        this.latestLocation = this.parseLocation();
+      if (this.options.basepath) {
+        const basepathRewrite = rewriteBasepath({
+          basepath: this.options.basepath
+        });
+        if (this.options.rewrite) {
+          this.rewrite = composeRewrites([basepathRewrite, this.options.rewrite]);
+        } else {
+          this.rewrite = basepathRewrite;
+        }
+      } else {
+        this.rewrite = this.options.rewrite;
+      }
+      this.origin = this.options.origin;
+      if (!this.origin) {
+        if (!this.isServer) {
+          this.origin = window.origin;
+        } else {
+          this.origin = "http://localhost";
+        }
+      }
+      if (this.history) {
+        this.updateLatestLocation();
       }
       if (this.options.routeTree !== this.routeTree) {
         this.routeTree = this.options.routeTree;
         this.buildRouteTree();
       }
-      if (!this.__store) {
+      if (!this.__store && this.latestLocation) {
         this.__store = new Store(getInitialRouterState(this.latestLocation), {
           onUpdate: () => {
             this.__store.state = {
@@ -101,6 +121,12 @@ class RouterCore {
         );
       }
     };
+    this.updateLatestLocation = () => {
+      this.latestLocation = this.parseLocation(
+        this.history.location,
+        this.latestLocation
+      );
+    };
     this.buildRouteTree = () => {
       const { routesById, routesByPath, flatRoutes } = processRouteTree({
         routeTree: this.routeTree,
@@ -138,25 +164,30 @@ class RouterCore {
         }
       });
     };
-    this.parseLocation = (previousLocation, locationToParse) => {
+    this.parseLocation = (locationToParse, previousLocation) => {
       const parse = ({
-        pathname,
-        search,
-        hash,
+        href,
         state
       }) => {
-        const parsedSearch = this.options.parseSearch(search);
+        const fullUrl = new URL(href, this.origin);
+        const url = executeRewriteInput(this.rewrite, fullUrl);
+        const parsedSearch = this.options.parseSearch(url.search);
         const searchStr = this.options.stringifySearch(parsedSearch);
+        url.search = searchStr;
+        const fullPath = url.href.replace(url.origin, "");
+        const { pathname, hash } = url;
         return {
+          href: fullPath,
+          publicHref: href,
+          url: url.href,
           pathname,
           searchStr,
           search: replaceEqualDeep(previousLocation?.search, parsedSearch),
           hash: hash.split("#").reverse()[0] ?? "",
-          href: `${pathname}${searchStr}${hash}`,
           state: replaceEqualDeep(previousLocation?.state, state)
         };
       };
-      const location = parse(locationToParse ?? this.history.location);
+      const location = parse(locationToParse);
       const { __tempLocation, __tempKey } = location.state;
       if (__tempLocation && (!__tempKey || __tempKey === this.tempLocationKey)) {
         const parsedTempLocation = parse(__tempLocation);
@@ -172,11 +203,9 @@ class RouterCore {
     };
     this.resolvePathWithBase = (from, path) => {
       const resolvedPath = resolvePath({
-        basepath: this.basepath,
         base: from,
         to: cleanPath(path),
         trailingSlash: this.options.trailingSlash,
-        caseSensitive: this.options.caseSensitive,
         parseCache: this.parsePathnameCache
       });
       return resolvedPath;
@@ -198,7 +227,6 @@ class RouterCore {
       return getMatchedRoutes({
         pathname,
         routePathname,
-        basepath: this.basepath,
         caseSensitive: this.options.caseSensitive,
         routesByPath: this.routesByPath,
         routesById: this.routesById,
@@ -225,57 +253,51 @@ class RouterCore {
           _buildLocation: true
         });
         const lastMatch = last(allCurrentLocationMatches);
-        let fromPath = this.resolvePathWithBase(lastMatch.fullPath, ".");
-        const toPath = dest.to ? this.resolvePathWithBase(fromPath, `${dest.to}`) : this.resolvePathWithBase(fromPath, ".");
-        const routeIsChanging = !!dest.to && !comparePaths(dest.to.toString(), fromPath) && !comparePaths(toPath, fromPath);
-        if (dest.unsafeRelative === "path") {
-          fromPath = currentLocation.pathname;
-        } else if (routeIsChanging && dest.from) {
-          fromPath = dest.from;
-          if (process.env.NODE_ENV !== "production" && dest._isNavigate) {
-            const allFromMatches = this.getMatchedRoutes(
-              dest.from,
-              void 0
-            ).matchedRoutes;
-            const matchedFrom = [...allCurrentLocationMatches].reverse().find((d) => {
-              return comparePaths(d.fullPath, fromPath);
-            });
-            const matchedCurrent = [...allFromMatches].reverse().find((d) => {
-              return comparePaths(d.fullPath, currentLocation.pathname);
-            });
-            if (!matchedFrom && !matchedCurrent) {
-              console.warn(`Could not find match for from: ${fromPath}`);
-            }
+        if (dest.from && process.env.NODE_ENV !== "production" && dest._isNavigate) {
+          const allFromMatches = this.getMatchedRoutes(
+            dest.from,
+            void 0
+          ).matchedRoutes;
+          const matchedFrom = findLast(allCurrentLocationMatches, (d) => {
+            return comparePaths(d.fullPath, dest.from);
+          });
+          const matchedCurrent = findLast(allFromMatches, (d) => {
+            return comparePaths(d.fullPath, lastMatch.fullPath);
+          });
+          if (!matchedFrom && !matchedCurrent) {
+            console.warn(`Could not find match for from: ${dest.from}`);
           }
         }
-        fromPath = this.resolvePathWithBase(fromPath, ".");
+        const defaultedFromPath = dest.unsafeRelative === "path" ? currentLocation.pathname : dest.from ?? lastMatch.fullPath;
+        const fromPath = this.resolvePathWithBase(defaultedFromPath, ".");
         const fromSearch = lastMatch.search;
         const fromParams = { ...lastMatch.params };
         const nextTo = dest.to ? this.resolvePathWithBase(fromPath, `${dest.to}`) : this.resolvePathWithBase(fromPath, ".");
-        let nextParams = dest.params === false || dest.params === null ? {} : (dest.params ?? true) === true ? fromParams : {
-          ...fromParams,
-          ...functionalUpdate(dest.params, fromParams)
-        };
+        const nextParams = dest.params === false || dest.params === null ? {} : (dest.params ?? true) === true ? fromParams : Object.assign(
+          fromParams,
+          functionalUpdate(dest.params, fromParams)
+        );
         const interpolatedNextTo = interpolatePath({
           path: nextTo,
-          params: nextParams ?? {},
+          params: nextParams,
           parseCache: this.parsePathnameCache
         }).interpolatedPath;
         const destRoutes = this.matchRoutes(interpolatedNextTo, void 0, {
           _buildLocation: true
         }).map((d) => this.looseRoutesById[d.routeId]);
         if (Object.keys(nextParams).length > 0) {
-          destRoutes.map((route) => {
-            return route.options.params?.stringify ?? route.options.stringifyParams;
-          }).filter(Boolean).forEach((fn) => {
-            nextParams = { ...nextParams, ...fn(nextParams) };
-          });
+          for (const route of destRoutes) {
+            const fn = route.options.params?.stringify ?? route.options.stringifyParams;
+            if (fn) {
+              Object.assign(nextParams, fn(nextParams));
+            }
+          }
         }
         const nextPathname = interpolatePath({
           // Use the original template path for interpolation
           // This preserves the original parameter syntax including optional parameters
           path: nextTo,
-          params: nextParams ?? {},
+          params: nextParams,
           leaveWildcards: false,
           leaveParams: opts.leaveParams,
           decodeCharMap: this.pathParamsDecodeCharMap,
@@ -283,19 +305,19 @@ class RouterCore {
         }).interpolatedPath;
         let nextSearch = fromSearch;
         if (opts._includeValidateSearch && this.options.search?.strict) {
-          let validatedSearch = {};
+          const validatedSearch = {};
           destRoutes.forEach((route) => {
-            try {
-              if (route.options.validateSearch) {
-                validatedSearch = {
-                  ...validatedSearch,
-                  ...validateSearch(route.options.validateSearch, {
+            if (route.options.validateSearch) {
+              try {
+                Object.assign(
+                  validatedSearch,
+                  validateSearch(route.options.validateSearch, {
                     ...validatedSearch,
                     ...nextSearch
-                  }) ?? {}
-                };
+                  })
+                );
+              } catch {
               }
-            } catch {
             }
           });
           nextSearch = validatedSearch;
@@ -312,13 +334,18 @@ class RouterCore {
         const hashStr = hash ? `#${hash}` : "";
         let nextState = dest.state === true ? currentLocation.state : dest.state ? functionalUpdate(dest.state, currentLocation.state) : {};
         nextState = replaceEqualDeep(currentLocation.state, nextState);
+        const fullPath = `${nextPathname}${searchStr}${hashStr}`;
+        const url = new URL(fullPath, this.origin);
+        const rewrittenUrl = executeRewriteOutput(this.rewrite, url);
         return {
+          publicHref: rewrittenUrl.pathname + rewrittenUrl.search + rewrittenUrl.hash,
+          href: fullPath,
+          url: rewrittenUrl.href,
           pathname: nextPathname,
           search: nextSearch,
           searchStr,
           state: nextState,
           hash: hash ?? "",
-          href: `${nextPathname}${searchStr}${hashStr}`,
           unmaskOnReload: dest.unmaskOnReload
         };
       };
@@ -329,7 +356,6 @@ class RouterCore {
           let params = {};
           const foundMask = this.options.routeMasks?.find((d) => {
             const match = matchPathname(
-              this.basepath,
               next.pathname,
               {
                 to: d.from,
@@ -347,7 +373,7 @@ class RouterCore {
           if (foundMask) {
             const { from: _from, ...maskProps } = foundMask;
             maskedDest = {
-              ...pick(opts, ["from"]),
+              from: opts.from,
               ...maskProps,
               params
             };
@@ -355,14 +381,13 @@ class RouterCore {
           }
         }
         if (maskedNext) {
-          const maskedFinal = build(maskedDest);
-          next.maskedLocation = maskedFinal;
+          next.maskedLocation = maskedNext;
         }
         return next;
       };
       if (opts.mask) {
         return buildWithMatches(opts, {
-          ...pick(opts, ["from"]),
+          from: opts.from,
           ...opts.mask
         });
       }
@@ -390,7 +415,7 @@ class RouterCore {
         });
         return isEqual;
       };
-      const isSameUrl = this.latestLocation.href === next.href;
+      const isSameUrl = trimPathRight(this.latestLocation.href) === trimPathRight(next.href);
       const previousCommitPromise = this.commitLocationPromise;
       this.commitLocationPromise = createControlledPromise(() => {
         previousCommitPromise?.resolve();
@@ -426,7 +451,7 @@ class RouterCore {
         nextHistory.state.__hashScrollIntoViewOptions = hashScrollIntoView ?? this.options.defaultHashScrollIntoView ?? true;
         this.shouldViewTransition = viewTransition;
         this.history[next.replace ? "replace" : "push"](
-          nextHistory.href,
+          nextHistory.publicHref,
           nextHistory.state,
           { ignoreBlocker }
         );
@@ -479,7 +504,7 @@ class RouterCore {
       if (reloadDocument) {
         if (!href) {
           const location = this.buildLocation({ to, ...rest });
-          href = this.history.createHref(location.href);
+          href = location.href;
         }
         if (rest.replace) {
           window.location.replace(href);
@@ -497,7 +522,7 @@ class RouterCore {
     };
     this.beforeLoad = () => {
       this.cancelMatches();
-      this.latestLocation = this.parseLocation(this.latestLocation);
+      this.updateLatestLocation();
       if (this.isServer) {
         const nextLocation = this.buildLocation({
           to: this.latestLocation.pathname,
@@ -558,10 +583,12 @@ class RouterCore {
                 location: next
               })
             });
-            await this.loadMatches({
+            await loadMatches({
+              router: this,
               sync: opts?.sync,
               matches: this.state.pendingMatches,
               location: next,
+              updateMatch: this.updateMatch,
               // eslint-disable-next-line @typescript-eslint/require-await
               onReady: async () => {
                 this.startViewTransition(async () => {
@@ -685,598 +712,6 @@ class RouterCore {
       const findFn = (d) => d.id === matchId;
       return this.state.cachedMatches.find(findFn) ?? this.state.pendingMatches?.find(findFn) ?? this.state.matches.find(findFn);
     };
-    this.triggerOnReady = (innerLoadContext) => {
-      if (!innerLoadContext.rendered) {
-        innerLoadContext.rendered = true;
-        return innerLoadContext.onReady?.();
-      }
-    };
-    this.resolvePreload = (innerLoadContext, matchId) => {
-      return !!(innerLoadContext.preload && !this.state.matches.some((d) => d.id === matchId));
-    };
-    this.handleRedirectAndNotFound = (innerLoadContext, match, err) => {
-      if (!isRedirect(err) && !isNotFound(err)) return;
-      if (isRedirect(err) && err.redirectHandled && !err.options.reloadDocument) {
-        throw err;
-      }
-      if (match) {
-        match._nonReactive.beforeLoadPromise?.resolve();
-        match._nonReactive.loaderPromise?.resolve();
-        match._nonReactive.beforeLoadPromise = void 0;
-        match._nonReactive.loaderPromise = void 0;
-        const status = isRedirect(err) ? "redirected" : "notFound";
-        innerLoadContext.updateMatch(match.id, (prev) => ({
-          ...prev,
-          status,
-          isFetching: false,
-          error: err
-        }));
-        if (isNotFound(err) && !err.routeId) {
-          err.routeId = match.routeId;
-        }
-        match._nonReactive.loadPromise?.resolve();
-      }
-      if (isRedirect(err)) {
-        innerLoadContext.rendered = true;
-        err.options._fromLocation = innerLoadContext.location;
-        err.redirectHandled = true;
-        err = this.resolveRedirect(err);
-        throw err;
-      } else {
-        this._handleNotFound(innerLoadContext, err);
-        throw err;
-      }
-    };
-    this.shouldSkipLoader = (matchId) => {
-      const match = this.getMatch(matchId);
-      if (!this.isServer && match._nonReactive.dehydrated) {
-        return true;
-      }
-      if (this.isServer) {
-        if (match.ssr === false) {
-          return true;
-        }
-      }
-      return false;
-    };
-    this.handleSerialError = (innerLoadContext, index, err, routerCode) => {
-      const { id: matchId, routeId } = innerLoadContext.matches[index];
-      const route = this.looseRoutesById[routeId];
-      if (err instanceof Promise) {
-        throw err;
-      }
-      err.routerCode = routerCode;
-      innerLoadContext.firstBadMatchIndex ??= index;
-      this.handleRedirectAndNotFound(
-        innerLoadContext,
-        this.getMatch(matchId),
-        err
-      );
-      try {
-        route.options.onError?.(err);
-      } catch (errorHandlerErr) {
-        err = errorHandlerErr;
-        this.handleRedirectAndNotFound(
-          innerLoadContext,
-          this.getMatch(matchId),
-          err
-        );
-      }
-      innerLoadContext.updateMatch(matchId, (prev) => {
-        prev._nonReactive.beforeLoadPromise?.resolve();
-        prev._nonReactive.beforeLoadPromise = void 0;
-        prev._nonReactive.loadPromise?.resolve();
-        return {
-          ...prev,
-          error: err,
-          status: "error",
-          isFetching: false,
-          updatedAt: Date.now(),
-          abortController: new AbortController()
-        };
-      });
-    };
-    this.isBeforeLoadSsr = (innerLoadContext, matchId, index, route) => {
-      const existingMatch = this.getMatch(matchId);
-      const parentMatchId = innerLoadContext.matches[index - 1]?.id;
-      const parentMatch = parentMatchId ? this.getMatch(parentMatchId) : void 0;
-      if (this.isShell()) {
-        existingMatch.ssr = matchId === rootRouteId;
-        return;
-      }
-      if (parentMatch?.ssr === false) {
-        existingMatch.ssr = false;
-        return;
-      }
-      const parentOverride = (tempSsr2) => {
-        if (tempSsr2 === true && parentMatch?.ssr === "data-only") {
-          return "data-only";
-        }
-        return tempSsr2;
-      };
-      const defaultSsr = this.options.defaultSsr ?? true;
-      if (route.options.ssr === void 0) {
-        existingMatch.ssr = parentOverride(defaultSsr);
-        return;
-      }
-      if (typeof route.options.ssr !== "function") {
-        existingMatch.ssr = parentOverride(route.options.ssr);
-        return;
-      }
-      const { search, params } = this.getMatch(matchId);
-      const ssrFnContext = {
-        search: makeMaybe(search, existingMatch.searchError),
-        params: makeMaybe(params, existingMatch.paramsError),
-        location: innerLoadContext.location,
-        matches: innerLoadContext.matches.map((match) => ({
-          index: match.index,
-          pathname: match.pathname,
-          fullPath: match.fullPath,
-          staticData: match.staticData,
-          id: match.id,
-          routeId: match.routeId,
-          search: makeMaybe(match.search, match.searchError),
-          params: makeMaybe(match.params, match.paramsError),
-          ssr: match.ssr
-        }))
-      };
-      const tempSsr = route.options.ssr(ssrFnContext);
-      if (isPromise(tempSsr)) {
-        return tempSsr.then((ssr) => {
-          existingMatch.ssr = parentOverride(ssr ?? defaultSsr);
-        });
-      }
-      existingMatch.ssr = parentOverride(tempSsr ?? defaultSsr);
-      return;
-    };
-    this.setupPendingTimeout = (innerLoadContext, matchId, route) => {
-      const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-      const shouldPending = !!(innerLoadContext.onReady && !this.isServer && !this.resolvePreload(innerLoadContext, matchId) && (route.options.loader || route.options.beforeLoad || routeNeedsPreload(route)) && typeof pendingMs === "number" && pendingMs !== Infinity && (route.options.pendingComponent ?? this.options?.defaultPendingComponent));
-      const match = this.getMatch(matchId);
-      if (shouldPending && match._nonReactive.pendingTimeout === void 0) {
-        const pendingTimeout = setTimeout(() => {
-          this.triggerOnReady(innerLoadContext);
-        }, pendingMs);
-        match._nonReactive.pendingTimeout = pendingTimeout;
-      }
-    };
-    this.shouldExecuteBeforeLoad = (innerLoadContext, matchId, route) => {
-      const existingMatch = this.getMatch(matchId);
-      if (!existingMatch._nonReactive.beforeLoadPromise && !existingMatch._nonReactive.loaderPromise)
-        return true;
-      this.setupPendingTimeout(innerLoadContext, matchId, route);
-      const then = () => {
-        let shouldExecuteBeforeLoad = true;
-        const match = this.getMatch(matchId);
-        if (match.status === "error") {
-          shouldExecuteBeforeLoad = true;
-        } else if (match.preload && (match.status === "redirected" || match.status === "notFound")) {
-          this.handleRedirectAndNotFound(innerLoadContext, match, match.error);
-        }
-        return shouldExecuteBeforeLoad;
-      };
-      return existingMatch._nonReactive.beforeLoadPromise ? existingMatch._nonReactive.beforeLoadPromise.then(then) : then();
-    };
-    this.executeBeforeLoad = (innerLoadContext, matchId, index, route) => {
-      const match = this.getMatch(matchId);
-      match._nonReactive.beforeLoadPromise = createControlledPromise();
-      const prevLoadPromise = match._nonReactive.loadPromise;
-      match._nonReactive.loadPromise = createControlledPromise(() => {
-        prevLoadPromise?.resolve();
-      });
-      const { paramsError, searchError } = match;
-      if (paramsError) {
-        this.handleSerialError(
-          innerLoadContext,
-          index,
-          paramsError,
-          "PARSE_PARAMS"
-        );
-      }
-      if (searchError) {
-        this.handleSerialError(
-          innerLoadContext,
-          index,
-          searchError,
-          "VALIDATE_SEARCH"
-        );
-      }
-      this.setupPendingTimeout(innerLoadContext, matchId, route);
-      const abortController = new AbortController();
-      const parentMatchId = innerLoadContext.matches[index - 1]?.id;
-      const parentMatch = parentMatchId ? this.getMatch(parentMatchId) : void 0;
-      const parentMatchContext = parentMatch?.context ?? this.options.context ?? void 0;
-      const context = { ...parentMatchContext, ...match.__routeContext };
-      let isPending = false;
-      const pending = () => {
-        if (isPending) return;
-        isPending = true;
-        innerLoadContext.updateMatch(matchId, (prev) => ({
-          ...prev,
-          isFetching: "beforeLoad",
-          fetchCount: prev.fetchCount + 1,
-          abortController,
-          context
-        }));
-      };
-      const resolve = () => {
-        match._nonReactive.beforeLoadPromise?.resolve();
-        match._nonReactive.beforeLoadPromise = void 0;
-        innerLoadContext.updateMatch(matchId, (prev) => ({
-          ...prev,
-          isFetching: false
-        }));
-      };
-      if (!route.options.beforeLoad) {
-        batch(() => {
-          pending();
-          resolve();
-        });
-        return;
-      }
-      const { search, params, cause } = match;
-      const preload = this.resolvePreload(innerLoadContext, matchId);
-      const beforeLoadFnContext = {
-        search,
-        abortController,
-        params,
-        preload,
-        context,
-        location: innerLoadContext.location,
-        navigate: (opts) => this.navigate({ ...opts, _fromLocation: innerLoadContext.location }),
-        buildLocation: this.buildLocation,
-        cause: preload ? "preload" : cause,
-        matches: innerLoadContext.matches
-      };
-      const updateContext = (beforeLoadContext2) => {
-        if (beforeLoadContext2 === void 0) {
-          batch(() => {
-            pending();
-            resolve();
-          });
-          return;
-        }
-        if (isRedirect(beforeLoadContext2) || isNotFound(beforeLoadContext2)) {
-          pending();
-          this.handleSerialError(
-            innerLoadContext,
-            index,
-            beforeLoadContext2,
-            "BEFORE_LOAD"
-          );
-        }
-        batch(() => {
-          pending();
-          innerLoadContext.updateMatch(matchId, (prev) => ({
-            ...prev,
-            __beforeLoadContext: beforeLoadContext2,
-            context: {
-              ...prev.context,
-              ...beforeLoadContext2
-            }
-          }));
-          resolve();
-        });
-      };
-      let beforeLoadContext;
-      try {
-        beforeLoadContext = route.options.beforeLoad(beforeLoadFnContext);
-        if (isPromise(beforeLoadContext)) {
-          pending();
-          return beforeLoadContext.catch((err) => {
-            this.handleSerialError(innerLoadContext, index, err, "BEFORE_LOAD");
-          }).then(updateContext);
-        }
-      } catch (err) {
-        pending();
-        this.handleSerialError(innerLoadContext, index, err, "BEFORE_LOAD");
-      }
-      updateContext(beforeLoadContext);
-      return;
-    };
-    this.handleBeforeLoad = (innerLoadContext, index) => {
-      const { id: matchId, routeId } = innerLoadContext.matches[index];
-      const route = this.looseRoutesById[routeId];
-      const serverSsr = () => {
-        if (this.isServer) {
-          const maybePromise = this.isBeforeLoadSsr(
-            innerLoadContext,
-            matchId,
-            index,
-            route
-          );
-          if (isPromise(maybePromise)) return maybePromise.then(queueExecution);
-        }
-        return queueExecution();
-      };
-      const queueExecution = () => {
-        if (this.shouldSkipLoader(matchId)) return;
-        const shouldExecuteBeforeLoadResult = this.shouldExecuteBeforeLoad(
-          innerLoadContext,
-          matchId,
-          route
-        );
-        return isPromise(shouldExecuteBeforeLoadResult) ? shouldExecuteBeforeLoadResult.then(execute) : execute(shouldExecuteBeforeLoadResult);
-      };
-      const execute = (shouldExecuteBeforeLoad) => {
-        if (shouldExecuteBeforeLoad) {
-          return this.executeBeforeLoad(innerLoadContext, matchId, index, route);
-        }
-        return;
-      };
-      return serverSsr();
-    };
-    this.executeHead = (innerLoadContext, matchId, route) => {
-      const match = this.getMatch(matchId);
-      if (!match) {
-        return;
-      }
-      if (!route.options.head && !route.options.scripts && !route.options.headers) {
-        return;
-      }
-      const assetContext = {
-        matches: innerLoadContext.matches,
-        match,
-        params: match.params,
-        loaderData: match.loaderData
-      };
-      return Promise.all([
-        route.options.head?.(assetContext),
-        route.options.scripts?.(assetContext),
-        route.options.headers?.(assetContext)
-      ]).then(([headFnContent, scripts, headers]) => {
-        const meta = headFnContent?.meta;
-        const links = headFnContent?.links;
-        const headScripts = headFnContent?.scripts;
-        const styles = headFnContent?.styles;
-        return {
-          meta,
-          links,
-          headScripts,
-          headers,
-          scripts,
-          styles
-        };
-      });
-    };
-    this.potentialPendingMinPromise = (matchId) => {
-      const latestMatch = this.getMatch(matchId);
-      return latestMatch._nonReactive.minPendingPromise;
-    };
-    this.getLoaderContext = (innerLoadContext, matchId, index, route) => {
-      const parentMatchPromise = innerLoadContext.matchPromises[index - 1];
-      const { params, loaderDeps, abortController, context, cause } = this.getMatch(matchId);
-      const preload = this.resolvePreload(innerLoadContext, matchId);
-      return {
-        params,
-        deps: loaderDeps,
-        preload: !!preload,
-        parentMatchPromise,
-        abortController,
-        context,
-        location: innerLoadContext.location,
-        navigate: (opts) => this.navigate({ ...opts, _fromLocation: innerLoadContext.location }),
-        cause: preload ? "preload" : cause,
-        route
-      };
-    };
-    this.runLoader = async (innerLoadContext, matchId, index, route) => {
-      try {
-        try {
-          if (!this.isServer || this.getMatch(matchId).ssr === true) {
-            this.loadRouteChunk(route);
-          }
-          const loaderResult = route.options.loader?.(
-            this.getLoaderContext(innerLoadContext, matchId, index, route)
-          );
-          const loaderResultIsPromise = route.options.loader && isPromise(loaderResult);
-          const willLoadSomething = !!(loaderResultIsPromise || route._lazyPromise || route._componentsPromise || route.options.head || route.options.scripts || route.options.headers || this.getMatch(matchId)._nonReactive.minPendingPromise);
-          if (willLoadSomething) {
-            innerLoadContext.updateMatch(matchId, (prev) => ({
-              ...prev,
-              isFetching: "loader"
-            }));
-          }
-          if (route.options.loader) {
-            const loaderData = loaderResultIsPromise ? await loaderResult : loaderResult;
-            this.handleRedirectAndNotFound(
-              innerLoadContext,
-              this.getMatch(matchId),
-              loaderData
-            );
-            if (loaderData !== void 0) {
-              innerLoadContext.updateMatch(matchId, (prev) => ({
-                ...prev,
-                loaderData
-              }));
-            }
-          }
-          if (route._lazyPromise) await route._lazyPromise;
-          const headResult = this.executeHead(innerLoadContext, matchId, route);
-          const head = headResult ? await headResult : void 0;
-          const pendingPromise = this.potentialPendingMinPromise(matchId);
-          if (pendingPromise) await pendingPromise;
-          if (route._componentsPromise) await route._componentsPromise;
-          innerLoadContext.updateMatch(matchId, (prev) => ({
-            ...prev,
-            error: void 0,
-            status: "success",
-            isFetching: false,
-            updatedAt: Date.now(),
-            ...head
-          }));
-        } catch (e) {
-          let error = e;
-          const pendingPromise = this.potentialPendingMinPromise(matchId);
-          if (pendingPromise) await pendingPromise;
-          this.handleRedirectAndNotFound(
-            innerLoadContext,
-            this.getMatch(matchId),
-            e
-          );
-          try {
-            route.options.onError?.(e);
-          } catch (onErrorError) {
-            error = onErrorError;
-            this.handleRedirectAndNotFound(
-              innerLoadContext,
-              this.getMatch(matchId),
-              onErrorError
-            );
-          }
-          const headResult = this.executeHead(innerLoadContext, matchId, route);
-          const head = headResult ? await headResult : void 0;
-          innerLoadContext.updateMatch(matchId, (prev) => ({
-            ...prev,
-            error,
-            status: "error",
-            isFetching: false,
-            ...head
-          }));
-        }
-      } catch (err) {
-        const match = this.getMatch(matchId);
-        if (match) {
-          const headResult = this.executeHead(innerLoadContext, matchId, route);
-          if (headResult) {
-            const head = await headResult;
-            innerLoadContext.updateMatch(matchId, (prev) => ({
-              ...prev,
-              ...head
-            }));
-          }
-          match._nonReactive.loaderPromise = void 0;
-        }
-        this.handleRedirectAndNotFound(innerLoadContext, match, err);
-      }
-    };
-    this.loadRouteMatch = async (innerLoadContext, index) => {
-      const { id: matchId, routeId } = innerLoadContext.matches[index];
-      let loaderShouldRunAsync = false;
-      let loaderIsRunningAsync = false;
-      const route = this.looseRoutesById[routeId];
-      const prevMatch = this.getMatch(matchId);
-      if (this.shouldSkipLoader(matchId)) {
-        if (this.isServer) {
-          const headResult = this.executeHead(innerLoadContext, matchId, route);
-          if (headResult) {
-            const head = await headResult;
-            innerLoadContext.updateMatch(matchId, (prev) => ({
-              ...prev,
-              ...head
-            }));
-          }
-          return this.getMatch(matchId);
-        }
-      } else if (prevMatch._nonReactive.loaderPromise) {
-        if (prevMatch.status === "success" && !innerLoadContext.sync && !prevMatch.preload) {
-          return this.getMatch(matchId);
-        }
-        await prevMatch._nonReactive.loaderPromise;
-        const match2 = this.getMatch(matchId);
-        if (match2.error) {
-          this.handleRedirectAndNotFound(innerLoadContext, match2, match2.error);
-        }
-      } else {
-        const age = Date.now() - this.getMatch(matchId).updatedAt;
-        const preload = this.resolvePreload(innerLoadContext, matchId);
-        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(
-          this.getLoaderContext(innerLoadContext, matchId, index, route)
-        ) : shouldReloadOption;
-        const nextPreload = !!preload && !this.state.matches.some((d) => d.id === matchId);
-        const match2 = this.getMatch(matchId);
-        match2._nonReactive.loaderPromise = createControlledPromise();
-        if (nextPreload !== match2.preload) {
-          innerLoadContext.updateMatch(matchId, (prev) => ({
-            ...prev,
-            preload: nextPreload
-          }));
-        }
-        const { status, invalid } = this.getMatch(matchId);
-        loaderShouldRunAsync = status === "success" && (invalid || (shouldReload ?? age > staleAge));
-        if (preload && route.options.preload === false) ;
-        else if (loaderShouldRunAsync && !innerLoadContext.sync) {
-          loaderIsRunningAsync = true;
-          (async () => {
-            try {
-              await this.runLoader(innerLoadContext, matchId, index, route);
-              const match3 = this.getMatch(matchId);
-              match3._nonReactive.loaderPromise?.resolve();
-              match3._nonReactive.loadPromise?.resolve();
-              match3._nonReactive.loaderPromise = void 0;
-            } catch (err) {
-              if (isRedirect(err)) {
-                await this.navigate(err.options);
-              }
-            }
-          })();
-        } else if (status !== "success" || loaderShouldRunAsync && innerLoadContext.sync) {
-          await this.runLoader(innerLoadContext, matchId, index, route);
-        } else {
-          const headResult = this.executeHead(innerLoadContext, matchId, route);
-          if (headResult) {
-            const head = await headResult;
-            innerLoadContext.updateMatch(matchId, (prev) => ({
-              ...prev,
-              ...head
-            }));
-          }
-        }
-      }
-      const match = this.getMatch(matchId);
-      if (!loaderIsRunningAsync) {
-        match._nonReactive.loaderPromise?.resolve();
-        match._nonReactive.loadPromise?.resolve();
-      }
-      clearTimeout(match._nonReactive.pendingTimeout);
-      match._nonReactive.pendingTimeout = void 0;
-      if (!loaderIsRunningAsync) match._nonReactive.loaderPromise = void 0;
-      match._nonReactive.dehydrated = void 0;
-      const nextIsFetching = loaderIsRunningAsync ? match.isFetching : false;
-      if (nextIsFetching !== match.isFetching || match.invalid !== false) {
-        innerLoadContext.updateMatch(matchId, (prev) => ({
-          ...prev,
-          isFetching: nextIsFetching,
-          invalid: false
-        }));
-      }
-      return this.getMatch(matchId);
-    };
-    this.loadMatches = async (baseContext) => {
-      const innerLoadContext = baseContext;
-      innerLoadContext.updateMatch ??= this.updateMatch;
-      innerLoadContext.matchPromises = [];
-      if (!this.isServer && this.state.matches.some((d) => d._forcePending)) {
-        this.triggerOnReady(innerLoadContext);
-      }
-      try {
-        for (let i = 0; i < innerLoadContext.matches.length; i++) {
-          const beforeLoad = this.handleBeforeLoad(innerLoadContext, i);
-          if (isPromise(beforeLoad)) await beforeLoad;
-        }
-        const max = innerLoadContext.firstBadMatchIndex ?? innerLoadContext.matches.length;
-        for (let i = 0; i < max; i++) {
-          innerLoadContext.matchPromises.push(
-            this.loadRouteMatch(innerLoadContext, i)
-          );
-        }
-        await Promise.all(innerLoadContext.matchPromises);
-        const readyPromise = this.triggerOnReady(innerLoadContext);
-        if (isPromise(readyPromise)) await readyPromise;
-      } catch (err) {
-        if (isNotFound(err) && !innerLoadContext.preload) {
-          const readyPromise = this.triggerOnReady(innerLoadContext);
-          if (isPromise(readyPromise)) await readyPromise;
-          throw err;
-        }
-        if (isRedirect(err)) {
-          throw err;
-        }
-      }
-      return innerLoadContext.matches;
-    };
     this.invalidate = (opts) => {
       const invalidate = (d) => {
         if (opts?.filter?.(d) ?? true) {
@@ -1341,39 +776,7 @@ class RouterCore {
       };
       this.clearCache({ filter });
     };
-    this.loadRouteChunk = (route) => {
-      if (!route._lazyLoaded && route._lazyPromise === void 0) {
-        if (route.lazyFn) {
-          route._lazyPromise = route.lazyFn().then((lazyRoute) => {
-            const { id: _id, ...options2 } = lazyRoute.options;
-            Object.assign(route.options, options2);
-            route._lazyLoaded = true;
-            route._lazyPromise = void 0;
-          });
-        } else {
-          route._lazyLoaded = true;
-        }
-      }
-      if (!route._componentsLoaded && route._componentsPromise === void 0) {
-        const loadComponents = () => {
-          const preloads = [];
-          for (const type of componentTypes) {
-            const preload = route.options[type]?.preload;
-            if (preload) preloads.push(preload());
-          }
-          if (preloads.length)
-            return Promise.all(preloads).then(() => {
-              route._componentsLoaded = true;
-              route._componentsPromise = void 0;
-            });
-          route._componentsLoaded = true;
-          route._componentsPromise = void 0;
-          return;
-        };
-        route._componentsPromise = route._lazyPromise ? route._lazyPromise.then(loadComponents) : loadComponents();
-      }
-      return route._componentsPromise;
-    };
+    this.loadRouteChunk = loadRouteChunk;
     this.preloadRoute = async (opts) => {
       const next = this.buildLocation(opts);
       let matches = this.matchRoutes(next, {
@@ -1401,7 +804,8 @@ class RouterCore {
         });
       });
       try {
-        matches = await this.loadMatches({
+        matches = await loadMatches({
+          router: this,
           matches,
           location: next,
           preload: true,
@@ -1447,7 +851,6 @@ class RouterCore {
       const pending = opts?.pending === void 0 ? !this.state.isLoading : opts.pending;
       const baseLocation = pending ? this.latestLocation : this.state.resolvedLocation || this.state.location;
       const match = matchPathname(
-        this.basepath,
         baseLocation.pathname,
         {
           ...opts,
@@ -1468,35 +871,6 @@ class RouterCore {
       }
       return match;
     };
-    this._handleNotFound = (innerLoadContext, err) => {
-      const routeCursor = this.routesById[err.routeId ?? ""] ?? this.routeTree;
-      const matchesByRouteId = {};
-      for (const match of innerLoadContext.matches) {
-        matchesByRouteId[match.routeId] = match;
-      }
-      if (!routeCursor.options.notFoundComponent && this.options?.defaultNotFoundComponent) {
-        routeCursor.options.notFoundComponent = this.options.defaultNotFoundComponent;
-      }
-      invariant(
-        routeCursor.options.notFoundComponent,
-        "No notFoundComponent found. Please set a notFoundComponent on your route or provide a defaultNotFoundComponent to the router."
-      );
-      const matchForRoute = matchesByRouteId[routeCursor.id];
-      invariant(
-        matchForRoute,
-        "Could not find match for route: " + routeCursor.id
-      );
-      innerLoadContext.updateMatch(matchForRoute.id, (prev) => ({
-        ...prev,
-        status: "notFound",
-        error: err,
-        isFetching: false
-      }));
-      if (err.routerCode === "BEFORE_LOAD" && routeCursor.parentRoute) {
-        err.routeId = routeCursor.parentRoute.id;
-        this._handleNotFound(innerLoadContext, err);
-      }
-    };
     this.hasNotFoundMatch = () => {
       return this.__store.state.matches.some(
         (d) => d.status === "notFound" || d.globalNotFound
@@ -1562,25 +936,6 @@ class RouterCore {
       }
       return rootRouteId;
     })();
-    const parseErrors = matchedRoutes.map((route) => {
-      let parsedParamsError;
-      const parseParams = route.options.params?.parse ?? route.options.parseParams;
-      if (parseParams) {
-        try {
-          const parsedParams = parseParams(routeParams);
-          Object.assign(routeParams, parsedParams);
-        } catch (err) {
-          parsedParamsError = new PathParamError(err.message, {
-            cause: err
-          });
-          if (opts?.throwOnError) {
-            throw parsedParamsError;
-          }
-          return parsedParamsError;
-        }
-      }
-      return;
-    });
     const matches = [];
     const getParentContext = (parentMatch) => {
       const parentMatchId = parentMatch?.id;
@@ -1619,22 +974,44 @@ class RouterCore {
         search: preMatchSearch
       }) ?? "";
       const loaderDepsHash = loaderDeps ? JSON.stringify(loaderDeps) : "";
-      const { usedParams, interpolatedPath } = interpolatePath({
+      const { interpolatedPath } = interpolatePath({
         path: route.fullPath,
         params: routeParams,
         decodeCharMap: this.pathParamsDecodeCharMap
       });
-      const matchId = interpolatePath({
+      const interpolatePathResult = interpolatePath({
         path: route.id,
         params: routeParams,
         leaveWildcards: true,
         decodeCharMap: this.pathParamsDecodeCharMap,
         parseCache: this.parsePathnameCache
-      }).interpolatedPath + loaderDepsHash;
+      });
+      const matchId = interpolatePathResult.interpolatedPath + loaderDepsHash;
       const existingMatch = this.getMatch(matchId);
       const previousMatch = this.state.matches.find(
         (d) => d.routeId === route.id
       );
+      const strictParams = existingMatch?._strictParams ?? interpolatePathResult.usedParams;
+      let paramsError = void 0;
+      if (!existingMatch) {
+        const strictParseParams = route.options.params?.parse ?? route.options.parseParams;
+        if (strictParseParams) {
+          try {
+            Object.assign(
+              strictParams,
+              strictParseParams(strictParams)
+            );
+          } catch (err) {
+            paramsError = new PathParamError(err.message, {
+              cause: err
+            });
+            if (opts?.throwOnError) {
+              throw paramsError;
+            }
+          }
+        }
+      }
+      Object.assign(routeParams, strictParams);
       const cause = previousMatch ? "stay" : "enter";
       let match;
       if (existingMatch) {
@@ -1642,7 +1019,7 @@ class RouterCore {
           ...existingMatch,
           cause,
           params: previousMatch ? replaceEqualDeep(previousMatch.params, routeParams) : routeParams,
-          _strictParams: usedParams,
+          _strictParams: strictParams,
           search: previousMatch ? replaceEqualDeep(previousMatch.search, preMatchSearch) : replaceEqualDeep(existingMatch.search, preMatchSearch),
           _strictSearch: strictMatchSearch
         };
@@ -1653,8 +1030,8 @@ class RouterCore {
           index,
           routeId: route.id,
           params: previousMatch ? replaceEqualDeep(previousMatch.params, routeParams) : routeParams,
-          _strictParams: usedParams,
-          pathname: joinPaths([this.basepath, interpolatedPath]),
+          _strictParams: strictParams,
+          pathname: interpolatedPath,
           updatedAt: Date.now(),
           search: previousMatch ? replaceEqualDeep(previousMatch.search, preMatchSearch) : preMatchSearch,
           _strictSearch: strictMatchSearch,
@@ -1662,7 +1039,7 @@ class RouterCore {
           status,
           isFetching: false,
           error: void 0,
-          paramsError: parseErrors[index],
+          paramsError,
           __routeContext: void 0,
           _nonReactive: {
             loadPromise: createControlledPromise()
@@ -1730,12 +1107,6 @@ class SearchParamError extends Error {
 }
 class PathParamError extends Error {
 }
-function makeMaybe(value, error) {
-  if (error) {
-    return { status: "error", error };
-  }
-  return { status: "success", value };
-}
 const normalize = (str) => str.endsWith("/") && str.length > 1 ? str.slice(0, -1) : str;
 function comparePaths(a, b) {
   return normalize(a) === normalize(b);
@@ -1780,20 +1151,6 @@ function validateSearch(validateSearch2, input) {
   }
   return {};
 }
-const componentTypes = [
-  "component",
-  "errorComponent",
-  "pendingComponent",
-  "notFoundComponent"
-];
-function routeNeedsPreload(route) {
-  for (const componentType of componentTypes) {
-    if (route.options[componentType]?.preload) {
-      return true;
-    }
-  }
-  return false;
-}
 const REQUIRED_PARAM_BASE_SCORE = 0.5;
 const OPTIONAL_PARAM_BASE_SCORE = 0.4;
 const WILDCARD_PARAM_BASE_SCORE = 0.25;
@@ -1926,7 +1283,6 @@ function processRouteTree({
 function getMatchedRoutes({
   pathname,
   routePathname,
-  basepath,
   caseSensitive,
   routesByPath,
   routesById,
@@ -1937,7 +1293,6 @@ function getMatchedRoutes({
   const trimmedPath = trimPathRight(pathname);
   const getMatchedParams = (route) => {
     const result = matchPathname(
-      basepath,
       trimmedPath,
       {
         to: route.fullPath,
@@ -2063,7 +1418,6 @@ export {
   PathParamError,
   RouterCore,
   SearchParamError,
-  componentTypes,
   defaultSerializeError,
   getInitialRouterState,
   getLocationChangeInfo,