@tanstack/react-router 1.31.0 → 1.31.1

package/src/router.ts

@@ -205,7 +205,7 @@ export interface BuildNextOptions {
     unmaskOnReload?: boolean
   }
   from?: string
-  _fromLocation?: ParsedLocation
+  fromSearch?: unknown
 }
 
 export interface DehydratedRouterState {
@@ -305,7 +305,6 @@ export class Router<
   )}`
   resetNextScroll = true
   shouldViewTransition?: true = undefined
-  navigateTimeout: Timeout | null = null
   latestLoadPromise: Promise<void> = Promise.resolve()
   subscribers = new Set<RouterListener<RouterEvent>>()
   injectedHtml: Array<InjectedHtmlEntry> = []
@@ -920,25 +919,25 @@ export class Router<
       } = {},
       matches?: Array<MakeRouteMatch<TRouteTree>>,
     ): ParsedLocation => {
-      const fromPath = dest.from || this.latestLocation.pathname
-      let fromSearch = dest._fromLocation?.search || this.latestLocation.search
+      let fromPath = this.latestLocation.pathname
+      let fromSearch = dest.fromSearch || this.latestLocation.search
 
-      const fromMatches = this.matchRoutes(fromPath, fromSearch)
+      const fromMatches = this.matchRoutes(
+        this.latestLocation.pathname,
+        fromSearch,
+      )
 
+      fromPath =
+        fromMatches.find((d) => d.id === dest.from)?.pathname || fromPath
       fromSearch = last(fromMatches)?.search || this.latestLocation.search
 
       const stayingMatches = matches?.filter((d) =>
         fromMatches.find((e) => e.routeId === d.routeId),
       )
 
-      const fromRoute = this.looseRoutesById[last(fromMatches)?.routeId]
-
       let pathname = dest.to
-        ? this.resolvePathWithBase(
-            dest.from ?? this.latestLocation.pathname,
-            `${dest.to}`,
-          )
-        : this.resolvePathWithBase(fromRoute?.fullPath, fromRoute?.fullPath)
+        ? this.resolvePathWithBase(fromPath, `${dest.to}`)
+        : this.resolvePathWithBase(fromPath, fromPath)
 
       const prevParams = { ...last(fromMatches)?.params }
 
@@ -1113,8 +1112,6 @@ export class Router<
     viewTransition,
     ...next
   }: ParsedLocation & CommitLocationOptions) => {
-    if (this.navigateTimeout) clearTimeout(this.navigateTimeout)
-
     const isSameUrl = this.latestLocation.href === next.href
 
     // If the next urls are the same and we're not replacing,
@@ -1275,15 +1272,10 @@ export class Router<
                 }
 
                 if (isRedirect(err)) {
-                  const redirect = this.resolveRedirect(err)
-
-                  if (!preload && !this.isServer) {
-                    this.navigate({ ...(redirect as any), replace: true })
-                  }
-
-                  throw redirect
+                  err = this.resolveRedirect(err)
+                  throw err
                 } else if (isNotFound(err)) {
-                  if (!preload) this.handleNotFound(matches, err)
+                  this.handleNotFound(matches, err)
                   throw err
                 }
               }
@@ -1295,6 +1287,25 @@ export class Router<
               const parentMatch = matches[index - 1]
               const route = this.looseRoutesById[match.routeId]!
               const abortController = new AbortController()
+              let loadPromise = match.loadPromise
+
+              if (match.isFetching) {
+                continue
+              }
+
+              const previousResolve = loadPromise.resolve
+              // Create a new one
+              loadPromise = createControlledPromise<void>(
+                // Resolve the old when we we resolve the new one
+                previousResolve,
+              )
+
+              // Otherwise, load the route
+              matches[index] = match = updateMatch(match.id, (prev) => ({
+                ...prev,
+                isFetching: 'beforeLoad',
+                loadPromise,
+              }))
 
               const handleSerialError = (err: any, routerCode: string) => {
                 err.routerCode = routerCode
@@ -1375,6 +1386,8 @@ export class Router<
                     cause: preload ? 'preload' : match.cause,
                   })) ?? ({} as any)
 
+                if ((latestPromise = checkLatest())) return latestPromise
+
                 if (
                   isRedirect(beforeLoadContext) ||
                   isNotFound(beforeLoadContext)
@@ -1404,6 +1417,8 @@ export class Router<
               }
             }
 
+            if ((latestPromise = checkLatest())) return latestPromise
+
             const validResolvedMatches = matches.slice(0, firstBadMatchIndex)
             const matchPromises: Array<Promise<any>> = []
 
@@ -1431,7 +1446,6 @@ export class Router<
                   let lazyPromise = Promise.resolve()
                   let componentsPromise = Promise.resolve() as Promise<any>
                   let loaderPromise = existing.loaderPromise
-                  let loadPromise = existing.loadPromise
 
                   // If the Matches component rendered
                   // the pending component and needs to show it for
@@ -1455,7 +1469,7 @@ export class Router<
                   }
 
                   try {
-                    if (!match.isFetching) {
+                    if (match.isFetching === 'beforeLoad') {
                       // If the user doesn't want the route to reload, just
                       // resolve with the existing loader data
 
@@ -1464,11 +1478,14 @@ export class Router<
                       // }
 
                       // Otherwise, load the route
-                      matches[index] = match = {
-                        ...match,
-                        isFetching: true,
-                        fetchCount: match.fetchCount + 1,
-                      }
+                      matches[index] = match = updateMatch(
+                        match.id,
+                        (prev) => ({
+                          ...prev,
+                          isFetching: 'loader',
+                          fetchCount: match.fetchCount + 1,
+                        }),
+                      )
 
                       lazyPromise =
                         route.lazyFn?.().then((lazyRoute) => {
@@ -1501,20 +1518,15 @@ export class Router<
                       // Kick off the loader!
                       loaderPromise = route.options.loader?.(loaderContext)
 
-                      const previousResolve = loadPromise.resolve
-                      // Create a new one
-                      loadPromise = createControlledPromise<void>(
-                        // Resolve the old when we we resolve the new one
-                        previousResolve,
+                      matches[index] = match = updateMatch(
+                        match.id,
+                        (prev) => ({
+                          ...prev,
+                          loaderPromise,
+                        }),
                       )
                     }
 
-                    matches[index] = match = updateMatch(match.id, (prev) => ({
-                      ...prev,
-                      loaderPromise,
-                      loadPromise,
-                    }))
-
                     const loaderData = await loaderPromise
                     if ((latestPromise = checkLatest()))
                       return await latestPromise
@@ -1580,7 +1592,7 @@ export class Router<
                   if ((latestPromise = checkLatest()))
                     return await latestPromise
 
-                  loadPromise.resolve()
+                  match.loadPromise.resolve()
                 }
 
                 // This is where all of the stale-while-revalidate magic happens
@@ -1725,27 +1737,38 @@ export class Router<
         let redirect: ResolvedRedirect | undefined
         let notFound: NotFoundError | undefined
 
-        try {
-          // Load the matches
-          const loadMatchesPromise = this.loadMatches({
+        const loadMatches = () =>
+          this.loadMatches({
             matches: pendingMatches,
             location: next,
             checkLatest: () => this.checkLatest(promise),
           })
 
-          if (previousMatches.length || this.isServer) {
-            await loadMatchesPromise
-          }
-        } catch (err) {
-          if (isRedirect(err)) {
-            redirect = err as ResolvedRedirect
-          } else if (isNotFound(err)) {
-            notFound = err
+        // If we are on the server or non-first load on the client, await
+        // the loadMatches before transitioning
+        if (previousMatches.length || this.isServer) {
+          try {
+            await loadMatches()
+          } catch (err) {
+            if (isRedirect(err)) {
+              redirect = err as ResolvedRedirect
+            } else if (isNotFound(err)) {
+              notFound = err
+            }
           }
-
-          // Swallow all other errors that happen inside
-          // of loadMatches. These errors will be handled
-          // as state on each match.
+        } else {
+          // For client-only first loads, we need to start the transition
+          // immediately and load the matches in the background
+          loadMatches().catch((err) => {
+            // This also means that we need to handle any redirects
+            // that might happen during the load/transition
+            if (isRedirect(err)) {
+              this.navigate({ ...err, replace: true })
+            }
+            // Because our history listener isn't guaranteed to be mounted
+            // on the first load, we need to manually call load again
+            this.load()
+          })
         }
 
         // Only apply the latest transition
@@ -1942,7 +1965,7 @@ export class Router<
     } catch (err) {
       if (isRedirect(err)) {
         return await this.preloadRoute({
-          _fromDest: next,
+          fromSearch: next.search,
           from: next.pathname,
           ...(err as any),
         })