@tanstack/react-router 1.97.25 → 1.98.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.97.25",
+  "version": "1.98.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -53,8 +53,8 @@
     "jsesc": "^3.1.0",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "1.97.8",
-    "@tanstack/router-core": "^1.97.25"
+    "@tanstack/history": "1.98.0",
+    "@tanstack/router-core": "^1.98.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Match.tsx

@@ -114,26 +114,41 @@ export const MatchInner = React.memo(function MatchInnerImpl({
 }): any {
   const router = useRouter()
 
-  const { match, matchIndex, routeId } = useRouterState({
+  const { match, key, routeId } = useRouterState({
     select: (s) => {
       const matchIndex = s.matches.findIndex((d) => d.id === matchId)
       const match = s.matches[matchIndex]!
       const routeId = match.routeId as string
+
+      const remountFn =
+        (router.routesById[routeId] as AnyRoute).options.remountDeps ??
+        router.options.defaultRemountDeps
+      const remountDeps = remountFn?.({
+        routeId,
+        loaderDeps: match.loaderDeps,
+        params: match._strictParams,
+        search: match._strictSearch,
+      })
+      const key = remountDeps ? JSON.stringify(remountDeps) : undefined
+
       return {
+        key,
         routeId,
-        matchIndex,
         match: pick(match, ['id', 'status', 'error']),
       }
     },
     structuralSharing: true as any,
   })
 
-  const route = router.routesById[routeId]!
+  const route = router.routesById[routeId] as AnyRoute
 
   const out = React.useMemo(() => {
     const Comp = route.options.component ?? router.options.defaultComponent
-    return Comp ? <Comp /> : <Outlet />
-  }, [route.options.component, router.options.defaultComponent])
+    if (Comp) {
+      return <Comp key={key} />
+    }
+    return <Outlet />
+  }, [key, route.options.component, router.options.defaultComponent])
 
   // function useChangedDiff(value: any) {
   //   const ref = React.useRef(value)
@@ -184,7 +199,8 @@ export const MatchInner = React.memo(function MatchInnerImpl({
     if (router.isServer) {
       return (
         <RouteErrorComponent
-          error={match.error}
+          error={match.error as any}
+          reset={undefined as any}
           info={{
             componentStack: '',
           }}

package/src/Matches.tsx

@@ -63,6 +63,7 @@ export interface RouteMatch<
   index: number
   pathname: string
   params: TAllParams
+  _strictParams: TAllParams
   status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'
   isFetching: false | 'beforeLoad' | 'loader'
   error: unknown
@@ -77,6 +78,7 @@ export interface RouteMatch<
   __beforeLoadContext: Record<string, unknown>
   context: TAllContext
   search: TFullSearchSchema
+  _strictSearch: TFullSearchSchema
   fetchCount: number
   abortController: AbortController
   cause: 'preload' | 'enter' | 'stay'

package/src/index.tsx

@@ -259,6 +259,8 @@ export type {
   BeforeLoadContextParameter,
   ResolveAllContext,
   ResolveAllParamsFromParent,
+  MakeRemountDepsOptionsUnion,
+  RemountDepsOptions,
 } from './route'
 
 export type {

package/src/lazyRouteComponent.tsx

@@ -8,9 +8,14 @@ import type { AsyncRouteComponent } from './route'
 // URL to the lazy module.
 // In that case, we want to attempt one window refresh to get the latest.
 function isModuleNotFoundError(error: any): boolean {
+  // chrome: "Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
+  // firefox: "error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
+  // safari: "Importing a module script failed."
+  if (typeof error?.message !== 'string') return false
   return (
-    typeof error?.message === 'string' &&
-    /Failed to fetch dynamically imported module/.test(error.message)
+    error.message.startsWith('Failed to fetch dynamically imported module') ||
+    error.message.startsWith('error loading dynamically imported module') ||
+    error.message.startsWith('Importing a module script failed')
   )
 }
 
@@ -46,6 +51,7 @@ export function lazyRouteComponent<
   let loadPromise: Promise<any> | undefined
   let comp: T[TKey] | T['default']
   let error: any
+  let reload: boolean
 
   const load = () => {
     if (typeof document === 'undefined' && ssr?.() === false) {
@@ -59,7 +65,27 @@ export function lazyRouteComponent<
           comp = res[exportName ?? 'default']
         })
         .catch((err) => {
+          // We don't want an error thrown from preload in this case, because
+          // there's nothing we want to do about module not found during preload.
+          // Record the error, the rest is handled during the render path.
           error = err
+          if (isModuleNotFoundError(error)) {
+            if (
+              error instanceof Error &&
+              typeof window !== 'undefined' &&
+              typeof sessionStorage !== 'undefined'
+            ) {
+              // Again, we want to reload one time on module not found error and not enter
+              // a reload loop if there is some other issue besides an old deploy.
+              // That's why we store our reload attempt in sessionStorage.
+              // Use error.message as key because it contains the module path that failed.
+              const storageKey = `tanstack_router_reload:${error.message}`
+              if (!sessionStorage.getItem(storageKey)) {
+                sessionStorage.setItem(storageKey, '1')
+                reload = true
+              }
+            }
+          }
         })
     }
 
@@ -68,36 +94,13 @@ export function lazyRouteComponent<
 
   const lazyComp = function Lazy(props: any) {
     // Now that we're out of preload and into actual render path,
-    // throw the error if it was a module not found error during preload
+    if (reload) {
+      // If it was a module loading error,
+      // throw eternal suspense while we wait for window to reload
+      window.location.reload()
+      throw new Promise(() => {})
+    }
     if (error) {
-      if (isModuleNotFoundError(error)) {
-        // We don't want an error thrown from preload in this case, because
-        // there's nothing we want to do about module not found during preload.
-        // Record the error, recover the promise with a null return,
-        // and we will attempt module not found resolution during the render path.
-
-        if (
-          error instanceof Error &&
-          typeof window !== 'undefined' &&
-          typeof sessionStorage !== 'undefined'
-        ) {
-          // Again, we want to reload one time on module not found error and not enter
-          // a reload loop if there is some other issue besides an old deploy.
-          // That's why we store our reload attempt in sessionStorage.
-          // Use error.message as key because it contains the module path that failed.
-          const storageKey = `tanstack_router_reload:${error.message}`
-          if (!sessionStorage.getItem(storageKey)) {
-            sessionStorage.setItem(storageKey, '1')
-            window.location.reload()
-
-            // Return empty component while we wait for window to reload
-            return {
-              default: () => null,
-            }
-          }
-        }
-      }
-
       // Otherwise, just throw the error
       throw error
     }

package/src/route.ts

@@ -59,7 +59,7 @@ import type {
   RouteMatch,
 } from './Matches'
 import type { NavigateOptions, ToMaskOptions } from './link'
-import type { RouteById, RouteIds, RoutePaths } from './routeInfo'
+import type { ParseRoute, RouteById, RouteIds, RoutePaths } from './routeInfo'
 import type { AnyRouter, RegisteredRouter, Router } from './router'
 import type { BuildLocationFn, NavigateFn } from './RouterProvider'
 import type { NotFoundError } from './not-found'
@@ -154,6 +154,7 @@ export type FileBaseRouteOptions<
   TRouterContext = {},
   TRouteContextFn = AnyContext,
   TBeforeLoadFn = AnyContext,
+  TRemountDepsFn = AnyContext,
 > = ParamsOptions<TPath, TParams> & {
   validateSearch?: Constrain<TSearchValidator, AnyValidator, DefaultValidator>
 
@@ -204,6 +205,18 @@ export type FileBaseRouteOptions<
     opts: FullSearchSchemaOption<TParentRoute, TSearchValidator>,
   ) => TLoaderDeps
 
+  remountDeps?: Constrain<
+    TRemountDepsFn,
+    (
+      opt: RemountDepsOptions<
+        TId,
+        FullSearchSchemaOption<TParentRoute, TSearchValidator>,
+        Expand<ResolveAllParamsFromParent<TParentRoute, TParams>>,
+        TLoaderDeps
+      >,
+    ) => any
+  >
+
   loader?: Constrain<
     TLoaderFn,
     (
@@ -275,6 +288,30 @@ export interface RouteContextOptions<
   context: Expand<RouteContextParameter<TParentRoute, TRouterContext>>
 }
 
+export interface RemountDepsOptions<
+  in out TRouteId,
+  in out TFullSearchSchema,
+  in out TAllParams,
+  in out TLoaderDeps,
+> {
+  routeId: TRouteId
+  search: TFullSearchSchema
+  params: TAllParams
+  loaderDeps: TLoaderDeps
+}
+
+export type MakeRemountDepsOptionsUnion<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TRoute extends AnyRoute = ParseRoute<TRouteTree>,
+> = TRoute extends any
+  ? RemountDepsOptions<
+      TRoute['id'],
+      TRoute['types']['fullSearchSchema'],
+      TRoute['types']['allParams'],
+      TRoute['types']['loaderDeps']
+    >
+  : never
+
 export interface BeforeLoadContextOptions<
   in out TParentRoute extends AnyRoute,
   in out TSearchValidator,

package/src/router.ts

@@ -61,6 +61,7 @@ import type {
   BeforeLoadContextOptions,
   ErrorRouteComponent,
   LoaderFnContext,
+  MakeRemountDepsOptionsUnion,
   NotFoundRouteComponent,
   RootRoute,
   RouteComponent,
@@ -451,6 +452,8 @@ export interface RouterOptions<
   pathParamsAllowedCharacters?: Array<
     ';' | ':' | '@' | '&' | '=' | '+' | '$' | ','
   >
+
+  defaultRemountDeps?: (opts: MakeRemountDepsOptionsUnion<TRouteTree>) => any
 }
 
 export interface RouterErrorSerializer<TSerializedError> {
@@ -1151,19 +1154,26 @@ export class Router<
 
       const parentMatch = matches[index - 1]
 
-      const [preMatchSearch, searchError]: [Record<string, any>, any] = (() => {
+      const [preMatchSearch, strictMatchSearch, searchError]: [
+        Record<string, any>,
+        Record<string, any>,
+        any,
+      ] = (() => {
         // Validate the search params and stabilize them
         const parentSearch = parentMatch?.search ?? next.search
+        const parentStrictSearch = parentMatch?._strictSearch ?? {}
 
         try {
-          const search =
-            validateSearch(route.options.validateSearch, parentSearch) ?? {}
+          const strictSearch =
+            validateSearch(route.options.validateSearch, { ...parentSearch }) ??
+            {}
 
           return [
             {
               ...parentSearch,
-              ...search,
+              ...strictSearch,
             },
+            { ...parentStrictSearch, ...strictSearch },
             undefined,
           ]
         } catch (err: any) {
@@ -1178,7 +1188,7 @@ export class Router<
             throw searchParamError
           }
 
-          return [parentSearch, searchParamError]
+          return [parentSearch, {}, searchParamError]
         }
       })()
 
@@ -1194,7 +1204,7 @@ export class Router<
 
       const loaderDepsHash = loaderDeps ? JSON.stringify(loaderDeps) : ''
 
-      const interpolatedPath = interpolatePath({
+      const { usedParams, interpolatedPath } = interpolatePath({
         path: route.fullPath,
         params: routeParams,
         decodeCharMap: this.pathParamsDecodeCharMap,
@@ -1206,7 +1216,7 @@ export class Router<
           params: routeParams,
           leaveWildcards: true,
           decodeCharMap: this.pathParamsDecodeCharMap,
-        }) + loaderDepsHash
+        }).interpolatedPath + loaderDepsHash
 
       // Waste not, want not. If we already have a match for this route,
       // reuse it. This is important for layout routes, which might stick
@@ -1231,9 +1241,11 @@ export class Router<
           params: previousMatch
             ? replaceEqualDeep(previousMatch.params, routeParams)
             : routeParams,
+          _strictParams: usedParams,
           search: previousMatch
             ? replaceEqualDeep(previousMatch.search, preMatchSearch)
             : replaceEqualDeep(existingMatch.search, preMatchSearch),
+          _strictSearch: strictMatchSearch,
         }
       } else {
         const status =
@@ -1251,11 +1263,13 @@ export class Router<
           params: previousMatch
             ? replaceEqualDeep(previousMatch.params, routeParams)
             : routeParams,
+          _strictParams: usedParams,
           pathname: joinPaths([this.basepath, interpolatedPath]),
           updatedAt: Date.now(),
           search: previousMatch
             ? replaceEqualDeep(previousMatch.search, preMatchSearch)
             : preMatchSearch,
+          _strictSearch: strictMatchSearch,
           searchError: undefined,
           status,
           isFetching: false,
@@ -1463,7 +1477,7 @@ export class Router<
                 path: route.fullPath,
                 params: matchedRoutesResult?.routeParams ?? {},
                 decodeCharMap: this.pathParamsDecodeCharMap,
-              })
+              }).interpolatedPath
               const pathname = joinPaths([this.basepath, interpolatedPath])
               return pathname === fromPath
             })?.id as keyof this['routesById']
@@ -1503,7 +1517,7 @@ export class Router<
         leaveWildcards: false,
         leaveParams: opts.leaveParams,
         decodeCharMap: this.pathParamsDecodeCharMap,
-      })
+      }).interpolatedPath
 
       let search = fromSearch
       if (opts._includeValidateSearch && this.options.search?.strict) {
@@ -2173,6 +2187,10 @@ export class Router<
           this._handleNotFound(matches, err, {
             updateMatch,
           })
+          this.serverSsr?.onMatchSettled({
+            router: this,
+            match: this.getMatch(match.id)!,
+          })
           throw err
         }
       }
@@ -2637,6 +2655,7 @@ export class Router<
         if (isNotFound(err) && !allPreload) {
           await triggerOnReady()
         }
+
         throw err
       }
     }
@@ -2835,8 +2854,10 @@ export class Router<
           _fromLocation: next,
         })
       }
-      // Preload errors are not fatal, but we should still log them
-      console.error(err)
+      if (!isNotFound(err)) {
+        // Preload errors are not fatal, but we should still log them
+        console.error(err)
+      }
       return undefined
     }
   }