@tanstack/react-router 1.45.3 → 1.45.5

package/src/Matches.tsx

@@ -68,6 +68,7 @@ export interface RouteMatch<
   globalNotFound?: boolean
   staticData: StaticDataRouteOption
   minPendingPromise?: ControlledPromise<void>
+  pendingTimeout?: ReturnType<typeof setTimeout>
 }
 
 export type MakeRouteMatch<
@@ -185,6 +186,10 @@ export type UseMatchRouteOptions<
 export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
   const router = useRouter()
 
+  useRouterState({
+    select: (s) => [s.location.href, s.resolvedLocation.href, s.status],
+  })
+
   return React.useCallback(
     <
       TFrom extends RoutePaths<TRouter['routeTree']> | string = string,

package/src/router.ts

@@ -1126,7 +1126,12 @@ export class Router<
   }
 
   cancelMatch = (id: string) => {
-    this.getMatch(id)?.abortController.abort()
+    const match = this.getMatch(id)
+
+    if (!match) return
+
+    match.abortController.abort()
+    clearTimeout(match.pendingTimeout)
   }
 
   cancelMatches = () => {
@@ -1142,22 +1147,13 @@ export class Router<
       } = {},
       matches?: Array<MakeRouteMatch<TRouteTree>>,
     ): ParsedLocation => {
-      // if the router is loading the previous location is what
-      // we should use because the old matches are still around
-      // and the latest location has already been updated.
-      // If the router is not loading we should always use the
-      // latest location because resolvedLocation can lag behind
-      // and the new matches could already render
-      const currentLocation = this.state.isLoading
-        ? this.state.resolvedLocation
-        : this.latestLocation
-
-      const location = dest._fromLocation ?? currentLocation
-
-      let fromPath = location.pathname
-      let fromSearch = dest.fromSearch || location.search
-
-      const fromMatches = this.matchRoutes(location.pathname, fromSearch)
+      const fromMatches =
+        dest._fromLocation != null
+          ? this.matchRoutes(
+              dest._fromLocation.pathname,
+              dest.fromSearch || dest._fromLocation.search,
+            )
+          : this.state.matches
 
       const fromMatch =
         dest.from != null
@@ -1170,14 +1166,14 @@ export class Router<
             )
           : undefined
 
-      fromPath = fromMatch?.pathname || fromPath
+      const fromPath = fromMatch?.pathname || this.latestLocation.pathname
 
       invariant(
         dest.from == null || fromMatch != null,
         'Could not find match for from: ' + dest.from,
       )
 
-      fromSearch = last(fromMatches)?.search || this.latestLocation.search
+      const fromSearch = last(fromMatches)?.search || this.latestLocation.search
 
       const stayingMatches = matches?.filter((d) =>
         fromMatches.find((e) => e.routeId === d.routeId),
@@ -1865,10 +1861,12 @@ export class Router<
                       this.options.defaultPendingComponent)
                   )
 
+                  let pendingTimeout: ReturnType<typeof setTimeout>
+
                   if (shouldPending) {
                     // If we might show a pending component, we need to wait for the
                     // pending promise to resolve before we start showing that state
-                    setTimeout(() => {
+                    pendingTimeout = setTimeout(() => {
                       try {
                         // Update the match and prematurely resolve the loadMatches promise so that
                         // the pending component can start rendering
@@ -1899,6 +1897,7 @@ export class Router<
                     ),
                     context: replaceEqualDeep(prev.context, parentContext),
                     abortController,
+                    pendingTimeout,
                   }))
 
                   const { search, params, routeContext, cause } =