@tanstack/react-router 1.45.3 → 1.45.4

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 = () => {
@@ -1865,10 +1870,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 +1906,7 @@ export class Router<
                     ),
                     context: replaceEqualDeep(prev.context, parentContext),
                     abortController,
+                    pendingTimeout,
                   }))
 
                   const { search, params, routeContext, cause } =