@tanstack/react-router 1.32.16 → 1.33.0

package/dist/esm/useNavigate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigate.js","sources":["../../src/useNavigate.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMatch } from './Matches'\nimport { useRouter } from './useRouter'\n\nimport type { FromPathOption, NavigateOptions } from './link'\nimport type { RoutePaths } from './routeInfo'\nimport type { AnyRouter, RegisteredRouter } from './router'\n\nexport type UseNavigateResult<TDefaultFrom extends string> = <\n  TTo extends string,\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> | string = TDefaultFrom,\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n  TMaskTo extends string = '',\n>({\n  from,\n  ...rest\n}: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<void>\n\nexport function useNavigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDefaultFrom extends string = string,\n>(_defaultOpts?: {\n  from?: FromPathOption<TRouter, TDefaultFrom>\n}): UseNavigateResult<TDefaultFrom> {\n  const router = useRouter()\n\n  return React.useCallback(\n    (options: NavigateOptions) => {\n      return router.navigate({\n        ...options,\n        from: options.to ? router.state.resolvedLocation.pathname : undefined,\n      })\n    },\n    [router],\n  ) as UseNavigateResult<TDefaultFrom>\n}\n\n// NOTE: I don't know of anyone using this. It's undocumented, so let's wait until someone needs it\n// export function typedNavigate<\n//   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n//   TDefaultFrom extends RoutePaths<TRouteTree> = '/',\n// >(navigate: (opts: NavigateOptions<any>) => Promise<void>) {\n//   return navigate as <\n//     TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,\n//     TTo extends string = '',\n//     TMaskFrom extends RoutePaths<TRouteTree> = '/',\n//     TMaskTo extends string = '',\n//   >(\n//     opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,\n//   ) => Promise<void>\n// } //\n\nexport function Navigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n  TTo extends string = '',\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n  TMaskTo extends string = '',\n>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {\n  const { navigate } = useRouter()\n  const match = useMatch({ strict: false })\n\n  React.useEffect(() => {\n    navigate({\n      from: props.to ? match.pathname : undefined,\n      ...props,\n    } as any)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return null\n}\n"],"names":[],"mappings":";;;AAmBO,SAAS,YAGd,cAEkC;AAClC,QAAM,SAAS;AAEf,SAAO,MAAM;AAAA,IACX,CAAC,YAA6B;AAC5B,aAAO,OAAO,SAAS;AAAA,QACrB,GAAG;AAAA,QACH,MAAM,QAAQ,KAAK,OAAO,MAAM,iBAAiB,WAAW;AAAA,MAAA,CAC7D;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAEX;AAiBO,SAAS,SAMd,OAAuE;AACjE,QAAA,EAAE,aAAa;AACrB,QAAM,QAAQ,SAAS,EAAE,QAAQ,MAAO,CAAA;AAExC,QAAM,UAAU,MAAM;AACX,aAAA;AAAA,MACP,MAAM,MAAM,KAAK,MAAM,WAAW;AAAA,MAClC,GAAG;AAAA,IAAA,CACG;AAAA,EAEV,GAAG,CAAE,CAAA;AAEE,SAAA;AACT;"}
+{"version":3,"file":"useNavigate.js","sources":["../../src/useNavigate.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMatch } from './useMatch'\nimport { useRouter } from './useRouter'\n\nimport type { FromPathOption, NavigateOptions } from './link'\nimport type { RoutePaths } from './routeInfo'\nimport type { AnyRouter, RegisteredRouter } from './router'\n\nexport type UseNavigateResult<TDefaultFrom extends string> = <\n  TTo extends string,\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> | string = TDefaultFrom,\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n  TMaskTo extends string = '',\n>({\n  from,\n  ...rest\n}: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<void>\n\nexport function useNavigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDefaultFrom extends string = string,\n>(_defaultOpts?: {\n  from?: FromPathOption<TRouter, TDefaultFrom>\n}): UseNavigateResult<TDefaultFrom> {\n  const router = useRouter()\n\n  return React.useCallback(\n    (options: NavigateOptions) => {\n      return router.navigate({\n        ...options,\n        from: options.to ? router.state.resolvedLocation.pathname : undefined,\n      })\n    },\n    [router],\n  ) as UseNavigateResult<TDefaultFrom>\n}\n\n// NOTE: I don't know of anyone using this. It's undocumented, so let's wait until someone needs it\n// export function typedNavigate<\n//   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n//   TDefaultFrom extends RoutePaths<TRouteTree> = '/',\n// >(navigate: (opts: NavigateOptions<any>) => Promise<void>) {\n//   return navigate as <\n//     TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,\n//     TTo extends string = '',\n//     TMaskFrom extends RoutePaths<TRouteTree> = '/',\n//     TMaskTo extends string = '',\n//   >(\n//     opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,\n//   ) => Promise<void>\n// } //\n\nexport function Navigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n  TTo extends string = '',\n  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n  TMaskTo extends string = '',\n>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {\n  const { navigate } = useRouter()\n  const match = useMatch({ strict: false })\n\n  React.useEffect(() => {\n    navigate({\n      from: props.to ? match.pathname : undefined,\n      ...props,\n    } as any)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return null\n}\n"],"names":[],"mappings":";;;AAmBO,SAAS,YAGd,cAEkC;AAClC,QAAM,SAAS;AAEf,SAAO,MAAM;AAAA,IACX,CAAC,YAA6B;AAC5B,aAAO,OAAO,SAAS;AAAA,QACrB,GAAG;AAAA,QACH,MAAM,QAAQ,KAAK,OAAO,MAAM,iBAAiB,WAAW;AAAA,MAAA,CAC7D;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAEX;AAiBO,SAAS,SAMd,OAAuE;AACjE,QAAA,EAAE,aAAa;AACrB,QAAM,QAAQ,SAAS,EAAE,QAAQ,MAAO,CAAA;AAExC,QAAM,UAAU,MAAM;AACX,aAAA;AAAA,MACP,MAAM,MAAM,KAAK,MAAM,WAAW;AAAA,MAClC,GAAG;AAAA,IAAA,CACG;AAAA,EAEV,GAAG,CAAE,CAAA;AAEE,SAAA;AACT;"}

package/dist/esm/useParams.js

@@ -1,4 +1,4 @@
-import { useMatch } from "./Matches.js";
+import { useMatch } from "./useMatch.js";
 function useParams(opts) {
   return useMatch({
     ...opts,

package/dist/esm/useParams.js.map

@@ -1 +1 @@
-{"version":3,"file":"useParams.js","sources":["../../src/useParams.tsx"],"sourcesContent":["import { useMatch } from './Matches'\nimport type { AnyRoute } from './route'\nimport type { AllParams, RouteById, RouteIds } from './routeInfo'\nimport type { RegisteredRouter } from './router'\nimport type { Expand } from './utils'\nimport type { StrictOrFrom } from './utils'\n\nexport function useParams<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,\n  TReturnIntersection extends boolean = false,\n  TParams = TReturnIntersection extends false\n    ? RouteById<TRouteTree, TFrom>['types']['allParams']\n    : Expand<Partial<AllParams<TRouteTree>>>,\n  TSelected = TParams,\n>(\n  opts: StrictOrFrom<TFrom, TReturnIntersection> & {\n    select?: (params: TParams) => TSelected\n  },\n): TSelected {\n  return useMatch({\n    ...opts,\n    select: (match) => {\n      return opts.select ? opts.select(match.params as TParams) : match.params\n    },\n  }) as TSelected\n}\n"],"names":[],"mappings":";AAOO,SAAS,UASd,MAGW;AACX,SAAO,SAAS;AAAA,IACd,GAAG;AAAA,IACH,QAAQ,CAAC,UAAU;AACjB,aAAO,KAAK,SAAS,KAAK,OAAO,MAAM,MAAiB,IAAI,MAAM;AAAA,IACpE;AAAA,EAAA,CACD;AACH;"}
+{"version":3,"file":"useParams.js","sources":["../../src/useParams.tsx"],"sourcesContent":["import { useMatch } from './useMatch'\nimport type { AnyRoute } from './route'\nimport type { AllParams, RouteById, RouteIds } from './routeInfo'\nimport type { RegisteredRouter } from './router'\nimport type { Expand } from './utils'\nimport type { StrictOrFrom } from './utils'\n\nexport function useParams<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,\n  TReturnIntersection extends boolean = false,\n  TParams = TReturnIntersection extends false\n    ? RouteById<TRouteTree, TFrom>['types']['allParams']\n    : Expand<Partial<AllParams<TRouteTree>>>,\n  TSelected = TParams,\n>(\n  opts: StrictOrFrom<TFrom, TReturnIntersection> & {\n    select?: (params: TParams) => TSelected\n  },\n): TSelected {\n  return useMatch({\n    ...opts,\n    select: (match) => {\n      return opts.select ? opts.select(match.params as TParams) : match.params\n    },\n  }) as TSelected\n}\n"],"names":[],"mappings":";AAOO,SAAS,UASd,MAGW;AACX,SAAO,SAAS;AAAA,IACd,GAAG;AAAA,IACH,QAAQ,CAAC,UAAU;AACjB,aAAO,KAAK,SAAS,KAAK,OAAO,MAAM,MAAiB,IAAI,MAAM;AAAA,IACpE;AAAA,EAAA,CACD;AACH;"}

package/dist/esm/useRouteContext.js

@@ -1,4 +1,4 @@
-import { useMatch } from "./Matches.js";
+import { useMatch } from "./useMatch.js";
 function useRouteContext(opts) {
   return useMatch({
     ...opts,

package/dist/esm/useRouteContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRouteContext.js","sources":["../../src/useRouteContext.ts"],"sourcesContent":["import { useMatch } from './Matches'\nimport type { MakeRouteMatch } from './Matches'\nimport type { AnyRoute } from './route'\nimport type { RouteById, RouteIds } from './routeInfo'\nimport type { RegisteredRouter } from './router'\nimport type { StrictOrFrom } from './utils'\n\nexport function useRouteContext<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,\n  TRouteContext = RouteById<TRouteTree, TFrom>['types']['allContext'],\n  TSelected = TRouteContext,\n>(\n  opts: StrictOrFrom<TFrom> & {\n    select?: (search: TRouteContext) => TSelected\n  },\n): TSelected {\n  return useMatch({\n    ...(opts as any),\n    select: (match: MakeRouteMatch<TRouteTree, TFrom>) =>\n      opts.select ? opts.select(match.context) : match.context,\n  })\n}\n"],"names":[],"mappings":";AAOO,SAAS,gBAMd,MAGW;AACX,SAAO,SAAS;AAAA,IACd,GAAI;AAAA,IACJ,QAAQ,CAAC,UACP,KAAK,SAAS,KAAK,OAAO,MAAM,OAAO,IAAI,MAAM;AAAA,EAAA,CACpD;AACH;"}
+{"version":3,"file":"useRouteContext.js","sources":["../../src/useRouteContext.ts"],"sourcesContent":["import { useMatch } from './useMatch'\nimport type { MakeRouteMatch } from './Matches'\nimport type { AnyRoute } from './route'\nimport type { RouteById, RouteIds } from './routeInfo'\nimport type { RegisteredRouter } from './router'\nimport type { StrictOrFrom } from './utils'\n\nexport function useRouteContext<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,\n  TRouteContext = RouteById<TRouteTree, TFrom>['types']['allContext'],\n  TSelected = TRouteContext,\n>(\n  opts: StrictOrFrom<TFrom> & {\n    select?: (search: TRouteContext) => TSelected\n  },\n): TSelected {\n  return useMatch({\n    ...(opts as any),\n    select: (match: MakeRouteMatch<TRouteTree, TFrom>) =>\n      opts.select ? opts.select(match.context) : match.context,\n  })\n}\n"],"names":[],"mappings":";AAOO,SAAS,gBAMd,MAGW;AACX,SAAO,SAAS;AAAA,IACd,GAAI;AAAA,IACJ,QAAQ,CAAC,UACP,KAAK,SAAS,KAAK,OAAO,MAAM,OAAO,IAAI,MAAM;AAAA,EAAA,CACpD;AACH;"}

package/dist/esm/useSearch.js

@@ -1,4 +1,4 @@
-import { useMatch } from "./Matches.js";
+import { useMatch } from "./useMatch.js";
 function useSearch(opts) {
   return useMatch({
     ...opts,

package/dist/esm/useSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSearch.js","sources":["../../src/useSearch.tsx"],"sourcesContent":["import { useMatch } from './Matches'\nimport type { AnyRoute, RootSearchSchema } from './route'\nimport type { FullSearchSchema, RouteById, RouteIds } from './routeInfo'\nimport type { RegisteredRouter } from './router'\nimport type { MakeRouteMatch } from './Matches'\nimport type { StrictOrFrom } from './utils'\n\nexport function useSearch<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,\n  TReturnIntersection extends boolean = false,\n  TSearch = TReturnIntersection extends false\n    ? Exclude<\n        RouteById<TRouteTree, TFrom>['types']['fullSearchSchema'],\n        RootSearchSchema\n      >\n    : Partial<Omit<FullSearchSchema<TRouteTree>, keyof RootSearchSchema>>,\n  TSelected = TSearch,\n>(\n  opts: StrictOrFrom<TFrom, TReturnIntersection> & {\n    select?: (search: TSearch) => TSelected\n  },\n): TSelected {\n  return useMatch({\n    ...opts,\n    select: (match: MakeRouteMatch<TRouteTree, TFrom>) => {\n      return opts.select ? opts.select(match.search) : match.search\n    },\n  })\n}\n"],"names":[],"mappings":";AAOO,SAAS,UAYd,MAGW;AACX,SAAO,SAAS;AAAA,IACd,GAAG;AAAA,IACH,QAAQ,CAAC,UAA6C;AACpD,aAAO,KAAK,SAAS,KAAK,OAAO,MAAM,MAAM,IAAI,MAAM;AAAA,IACzD;AAAA,EAAA,CACD;AACH;"}
+{"version":3,"file":"useSearch.js","sources":["../../src/useSearch.tsx"],"sourcesContent":["import { useMatch } from './useMatch'\nimport type { AnyRoute, RootSearchSchema } from './route'\nimport type { FullSearchSchema, RouteById, RouteIds } from './routeInfo'\nimport type { RegisteredRouter } from './router'\nimport type { MakeRouteMatch } from './Matches'\nimport type { StrictOrFrom } from './utils'\n\nexport function useSearch<\n  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,\n  TReturnIntersection extends boolean = false,\n  TSearch = TReturnIntersection extends false\n    ? Exclude<\n        RouteById<TRouteTree, TFrom>['types']['fullSearchSchema'],\n        RootSearchSchema\n      >\n    : Partial<Omit<FullSearchSchema<TRouteTree>, keyof RootSearchSchema>>,\n  TSelected = TSearch,\n>(\n  opts: StrictOrFrom<TFrom, TReturnIntersection> & {\n    select?: (search: TSearch) => TSelected\n  },\n): TSelected {\n  return useMatch({\n    ...opts,\n    select: (match: MakeRouteMatch<TRouteTree, TFrom>) => {\n      return opts.select ? opts.select(match.search) : match.search\n    },\n  })\n}\n"],"names":[],"mappings":";AAOO,SAAS,UAYd,MAGW;AACX,SAAO,SAAS;AAAA,IACd,GAAG;AAAA,IACH,QAAQ,CAAC,UAA6C;AACpD,aAAO,KAAK,SAAS,KAAK,OAAO,MAAM,MAAM,IAAI,MAAM;AAAA,IACzD;AAAA,EAAA,CACD;AACH;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.32.16",
+  "version": "1.33.0",
   "description": "",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/CatchBoundary.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react'
+import type { ErrorRouteComponent } from './route'
+import type { ErrorInfo } from 'react'
 
 export function CatchBoundary(props: {
   getResetKey: () => string
-  children: any
-  errorComponent?: any
-  onCatch?: (error: any) => void
+  children: React.ReactNode
+  errorComponent?: ErrorRouteComponent
+  onCatch?: (error: Error, errorInfo: ErrorInfo) => void
 }) {
   const errorComponent = props.errorComponent ?? ErrorComponent
 
@@ -28,14 +30,17 @@ export function CatchBoundary(props: {
 
 class CatchBoundaryImpl extends React.Component<{
   getResetKey: () => string
-  children: (props: { error: any; reset: () => void }) => any
-  onCatch?: (error: any) => void
+  children: (props: {
+    error: Error | null
+    reset: () => void
+  }) => React.ReactNode
+  onCatch?: (error: Error, errorInfo: ErrorInfo) => void
 }> {
-  state = { error: null } as { error: any; resetKey: string }
+  state = { error: null } as { error: Error | null; resetKey: string }
   static getDerivedStateFromProps(props: any) {
     return { resetKey: props.getResetKey() }
   }
-  static getDerivedStateFromError(error: any) {
+  static getDerivedStateFromError(error: Error) {
     return { error }
   }
   reset() {
@@ -53,11 +58,9 @@ class CatchBoundaryImpl extends React.Component<{
       this.reset()
     }
   }
-  componentDidCatch(error: any) {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     if (this.props.onCatch) {
-      this.props.onCatch(error)
-    } else {
-      console.error(error)
+      this.props.onCatch(error, errorInfo)
     }
   }
   render() {

package/src/Matches.tsx

@@ -9,8 +9,13 @@ import { CatchNotFound, DefaultGlobalNotFound, isNotFound } from './not-found'
 import { isRedirect } from './redirects'
 import { type AnyRouter, type RegisteredRouter } from './router'
 import { Transitioner } from './Transitioner'
+import {
+  type AnyRoute,
+  type ReactNode,
+  type StaticDataRouteOption,
+} from './route'
+import { rootRouteId } from './root'
 import type { ResolveRelativePath, ToOptions } from './link'
-import type { AnyRoute, ReactNode, StaticDataRouteOption } from './route'
 import type {
   AllParams,
   FullSearchSchema,
@@ -20,13 +25,7 @@ import type {
   RouteIds,
   RoutePaths,
 } from './routeInfo'
-import type {
-  ControlledPromise,
-  DeepPartial,
-  Expand,
-  NoInfer,
-  StrictOrFrom,
-} from './utils'
+import type { ControlledPromise, DeepPartial, NoInfer } from './utils'
 
 export const matchContext = React.createContext<string | undefined>(undefined)
 
@@ -141,9 +140,9 @@ function MatchesInner() {
         onCatch={(error) => {
           warning(
             false,
-            `The following error wasn't caught by any route! 👇 At the very least, consider setting an 'errorComponent' in your RootRoute!`,
+            `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
           )
-          console.error(error)
+          warning(false, error.message || error.toString())
         }}
       >
         {matchId ? <Match matchId={matchId} /> : null}
@@ -177,6 +176,8 @@ export function Match({ matchId }: { matchId: string }) {
   const routeErrorComponent =
     route.options.errorComponent ?? router.options.defaultErrorComponent
 
+  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch
+
   const routeNotFoundComponent = route.isRoot
     ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
       route.options.notFoundComponent ??
@@ -208,12 +209,12 @@ export function Match({ matchId }: { matchId: string }) {
       <ResolvedSuspenseBoundary fallback={pendingElement}>
         <ResolvedCatchBoundary
           getResetKey={() => resetKey}
-          errorComponent={routeErrorComponent ?? ErrorComponent}
-          onCatch={(error) => {
+          errorComponent={routeErrorComponent || ErrorComponent}
+          onCatch={(error, errorInfo) => {
             // Forward not found errors (we don't want to show the error component for these)
             if (isNotFound(error)) throw error
             warning(false, `Error in route match: ${matchId}`)
-            console.error(error)
+            routeOnCatch?.(error, errorInfo)
           }}
         >
           <ResolvedNotFoundBoundary
@@ -417,7 +418,19 @@ export const Outlet = React.memo(function Outlet() {
     return null
   }
 
-  return <Match matchId={childMatchId} />
+  const nextMatch = <Match matchId={childMatchId} />
+
+  const pendingElement = router.options.defaultPendingComponent ? (
+    <router.options.defaultPendingComponent />
+  ) : null
+
+  if (matchId === rootRouteId) {
+    return (
+      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>
+    )
+  }
+
+  return nextMatch
 })
 
 function renderRouteNotFound(router: AnyRouter, route: AnyRoute, data: any) {
@@ -532,39 +545,6 @@ export function MatchRoute<
   return params ? props.children : null
 }
 
-export function useMatch<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TReturnIntersection extends boolean = false,
-  TRouteMatch = MakeRouteMatch<TRouteTree, TFrom, TReturnIntersection>,
-  TSelected = TRouteMatch,
->(
-  opts: StrictOrFrom<TFrom, TReturnIntersection> & {
-    select?: (match: TRouteMatch) => TSelected
-  },
-): TSelected {
-  const nearestMatchId = React.useContext(matchContext)
-
-  const matchSelection = useRouterState({
-    select: (state) => {
-      const match = state.matches.find((d) =>
-        opts.from ? opts.from === d.routeId : d.id === nearestMatchId,
-      )
-
-      invariant(
-        match,
-        `Could not find ${
-          opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'
-        }`,
-      )
-
-      return opts.select ? opts.select(match as any) : match
-    },
-  })
-
-  return matchSelection as TSelected
-}
-
 export function useMatches<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
@@ -634,52 +614,6 @@ export function useChildMatches<
   })
 }
 
-export function useLoaderDeps<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TRouteMatch extends MakeRouteMatch<TRouteTree, TFrom> = MakeRouteMatch<
-    TRouteTree,
-    TFrom
-  >,
-  TSelected = Required<TRouteMatch>['loaderDeps'],
->(
-  opts: StrictOrFrom<TFrom> & {
-    select?: (match: TRouteMatch) => TSelected
-  },
-): TSelected {
-  return useMatch({
-    ...opts,
-    select: (s) => {
-      return typeof opts.select === 'function'
-        ? opts.select(s.loaderDeps)
-        : s.loaderDeps
-    },
-  })
-}
-
-export function useLoaderData<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
-  TRouteMatch extends MakeRouteMatch<TRouteTree, TFrom> = MakeRouteMatch<
-    TRouteTree,
-    TFrom
-  >,
-  TSelected = Required<TRouteMatch>['loaderData'],
->(
-  opts: StrictOrFrom<TFrom> & {
-    select?: (match: TRouteMatch) => TSelected
-  },
-): TSelected {
-  return useMatch({
-    ...opts,
-    select: (s) => {
-      return typeof opts.select === 'function'
-        ? opts.select(s.loaderData as TRouteMatch)
-        : s.loaderData
-    },
-  }) as TSelected
-}
-
 export function isServerSideError(error: unknown): error is {
   __isServerError: true
   data: Record<string, any>

package/src/fileRoute.ts

@@ -1,6 +1,8 @@
 import warning from 'tiny-warning'
 import { createRoute } from './route'
-import { useLoaderData, useLoaderDeps, useMatch } from './Matches'
+import { useMatch } from './useMatch'
+import { useLoaderDeps } from './useLoaderDeps'
+import { useLoaderData } from './useLoaderData'
 import { useSearch } from './useSearch'
 import { useParams } from './useParams'
 import { useNavigate } from './useNavigate'
@@ -18,7 +20,6 @@ import type {
   ResolveLoaderData,
   ResolveRouteContext,
   ResolveSearchSchemaUsed,
-  RootRouteId,
   Route,
   RouteConstraints,
   RouteContext,
@@ -32,6 +33,7 @@ import type { MakeRouteMatch } from './Matches'
 import type { NoInfer } from '@tanstack/react-store'
 import type { RegisteredRouter } from './router'
 import type { RouteById, RouteIds } from './routeInfo'
+import type { RootRouteId } from './root'
 
 export interface FileRoutesByPath {
   // '/': {

package/src/index.tsx

@@ -74,12 +74,9 @@ export {
   Outlet,
   useMatchRoute,
   MatchRoute,
-  useMatch,
   useMatches,
   useParentMatches,
   useChildMatches,
-  useLoaderDeps,
-  useLoaderData,
   isServerSideError,
   defaultDeserializeError,
   type RouteMatch,
@@ -88,6 +85,9 @@ export {
   type UseMatchRouteOptions,
   type MakeMatchRouteOptions,
 } from './Matches'
+export { useMatch } from './useMatch'
+export { useLoaderDeps } from './useLoaderDeps'
+export { useLoaderData } from './useLoaderData'
 export {
   joinPaths,
   cleanPath,
@@ -110,8 +110,8 @@ export {
   type Redirect,
   type ResolvedRedirect,
 } from './redirects'
+export { rootRouteId, type RootRouteId } from './root'
 export {
-  rootRouteId,
   RouteApi,
   getRouteApi,
   Route,
@@ -122,7 +122,6 @@ export {
   createRootRouteWithContext,
   createRouteMask,
   NotFoundRoute,
-  type RootRouteId,
   type AnyPathParams,
   type SearchSchemaInput,
   type AnySearchSchema,

package/src/link.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { flushSync } from 'react-dom'
-import { useMatch } from './Matches'
+import { useMatch } from './useMatch'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 import { deepEqual, exactPathTest, functionalUpdate } from './utils'

package/src/not-found.tsx

@@ -4,6 +4,7 @@ import { CatchBoundary } from './CatchBoundary'
 import { useRouterState } from './useRouterState'
 import type { RegisteredRouter } from './router'
 import type { RouteIds } from './routeInfo'
+import type { ErrorInfo } from 'react'
 
 export type NotFoundError = {
   /**
@@ -34,7 +35,7 @@ export function isNotFound(obj: any): obj is NotFoundError {
 
 export function CatchNotFound(props: {
   fallback?: (error: NotFoundError) => React.ReactElement
-  onCatch?: (error: any) => void
+  onCatch?: (error: Error, errorInfo: ErrorInfo) => void
   children: React.ReactNode
 }) {
   // TODO: Some way for the user to programmatically reset the not-found boundary?
@@ -45,9 +46,9 @@ export function CatchNotFound(props: {
   return (
     <CatchBoundary
       getResetKey={() => resetKey}
-      onCatch={(error) => {
+      onCatch={(error, errorInfo) => {
         if (isNotFound(error)) {
-          props.onCatch?.(error)
+          props.onCatch?.(error, errorInfo)
         } else {
           throw error
         }

package/src/root.ts

@@ -0,0 +1,2 @@
+export const rootRouteId = '__root__' as const
+export type RootRouteId = typeof rootRouteId

package/src/route.ts

@@ -1,10 +1,14 @@
 import invariant from 'tiny-invariant'
-import { useLoaderData, useLoaderDeps, useMatch } from './Matches'
+import { useMatch } from './useMatch'
+import { useLoaderDeps } from './useLoaderDeps'
+import { useLoaderData } from './useLoaderData'
 import { joinPaths, trimPathLeft } from './path'
 import { useParams } from './useParams'
 import { useSearch } from './useSearch'
 import { notFound } from './not-found'
 import { useNavigate } from './useNavigate'
+import { rootRouteId } from './root'
+import type { RootRouteId } from './root'
 import type { UseNavigateResult } from './useNavigate'
 import type * as React from 'react'
 import type { MakeRouteMatch, RouteMatch } from './Matches'
@@ -24,8 +28,6 @@ import type { BuildLocationFn, NavigateFn } from './RouterProvider'
 import type { NotFoundError } from './not-found'
 import type { LazyRoute } from './fileRoute'
 
-export const rootRouteId = '__root__' as const
-export type RootRouteId = typeof rootRouteId
 export type AnyPathParams = {}
 
 export type SearchSchemaInput = {
@@ -264,6 +266,7 @@ export type UpdatableRouteOptions<
   // Filter functions that can manipulate search params *after* they are passed to links and navigate
   // calls that match this route.
   postSearchFilters?: Array<SearchFilter<TFullSearchSchema>>
+  onCatch?: (error: Error, errorInfo: React.ErrorInfo) => void
   onError?: (err: any) => void
   // These functions are called as route matches are loaded, stick around and leave the active
   // matches
@@ -1279,7 +1282,7 @@ export type ErrorRouteProps = {
 }
 
 export type ErrorComponentProps = {
-  error: unknown
+  error: Error
   info?: { componentStack: string }
   reset: () => void
 }

package/src/router.ts

@@ -2,7 +2,7 @@ import { createBrowserHistory, createMemoryHistory } from '@tanstack/history'
 import { Store } from '@tanstack/react-store'
 import invariant from 'tiny-invariant'
 import warning from 'tiny-warning'
-import { rootRouteId } from './route'
+import { rootRouteId } from './root'
 import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
   createControlledPromise,
@@ -81,6 +81,7 @@ import type { NotFoundError } from './not-found'
 import type { NavigateOptions, ResolveRelativePath, ToOptions } from './link'
 import type { NoInfer } from '@tanstack/react-store'
 import type { DeferredPromiseState } from './defer'
+import type { ErrorInfo } from 'react'
 
 //
 
@@ -138,6 +139,7 @@ export interface RouterOptions<
   defaultStaleTime?: number
   defaultPreloadStaleTime?: number
   defaultPreloadGcTime?: number
+  defaultOnCatch?: (error: Error, errorInfo: ErrorInfo) => void
   defaultViewTransition?: boolean
   notFoundMode?: 'root' | 'fuzzy'
   defaultGcTime?: number
@@ -1453,13 +1455,12 @@ export class Router<
         }))
         // }
 
-        rendered = true
-
         if (!(err as any).routeId) {
           ;(err as any).routeId = match.routeId
         }
 
         if (isRedirect(err)) {
+          rendered = true
           err = this.resolveRedirect(err)
           throw err
         } else if (isNotFound(err)) {
@@ -1862,6 +1863,10 @@ export class Router<
       await triggerOnReady()
     } catch (err) {
       if (isRedirect(err) || isNotFound(err)) {
+        if (isNotFound(err) && !preload) {
+          console.log('trigger')
+          await triggerOnReady()
+        }
         throw err
       }
     }
@@ -2151,7 +2156,7 @@ export class Router<
 
     invariant(
       _ctx,
-      'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?',
+      'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Please file an issue!',
     )
 
     const ctx = this.options.transformer.parse(_ctx) as HydrationCtx

package/src/useLoaderData.tsx

@@ -0,0 +1,29 @@
+import { type RegisteredRouter } from './router'
+import { type AnyRoute } from './route'
+import { useMatch } from './useMatch'
+import type { MakeRouteMatch } from './Matches'
+import type { RouteIds } from './routeInfo'
+import type { StrictOrFrom } from './utils'
+
+export function useLoaderData<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TRouteMatch extends MakeRouteMatch<TRouteTree, TFrom> = MakeRouteMatch<
+    TRouteTree,
+    TFrom
+  >,
+  TSelected = Required<TRouteMatch>['loaderData'],
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (match: TRouteMatch) => TSelected
+  },
+): TSelected {
+  return useMatch({
+    ...opts,
+    select: (s) => {
+      return typeof opts.select === 'function'
+        ? opts.select(s.loaderData as TRouteMatch)
+        : s.loaderData
+    },
+  }) as TSelected
+}

package/src/useLoaderDeps.tsx

@@ -0,0 +1,29 @@
+import { type RegisteredRouter } from './router'
+import { type AnyRoute } from './route'
+import { useMatch } from './useMatch'
+import type { MakeRouteMatch } from './Matches'
+import type { RouteIds } from './routeInfo'
+import type { StrictOrFrom } from './utils'
+
+export function useLoaderDeps<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TRouteMatch extends MakeRouteMatch<TRouteTree, TFrom> = MakeRouteMatch<
+    TRouteTree,
+    TFrom
+  >,
+  TSelected = Required<TRouteMatch>['loaderDeps'],
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (match: TRouteMatch) => TSelected
+  },
+): TSelected {
+  return useMatch({
+    ...opts,
+    select: (s) => {
+      return typeof opts.select === 'function'
+        ? opts.select(s.loaderDeps)
+        : s.loaderDeps
+    },
+  })
+}

package/src/useMatch.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import invariant from 'tiny-invariant'
+import { useRouterState } from './useRouterState'
+import { type RegisteredRouter } from './router'
+import { type AnyRoute } from './route'
+import { matchContext } from './Matches'
+import type { MakeRouteMatch } from './Matches'
+import type { RouteIds } from './routeInfo'
+import type { StrictOrFrom } from './utils'
+
+export function useMatch<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TReturnIntersection extends boolean = false,
+  TRouteMatch = MakeRouteMatch<TRouteTree, TFrom, TReturnIntersection>,
+  TSelected = TRouteMatch,
+>(
+  opts: StrictOrFrom<TFrom, TReturnIntersection> & {
+    select?: (match: TRouteMatch) => TSelected
+  },
+): TSelected {
+  const nearestMatchId = React.useContext(matchContext)
+
+  const matchSelection = useRouterState({
+    select: (state) => {
+      const match = state.matches.find((d) =>
+        opts.from ? opts.from === d.routeId : d.id === nearestMatchId,
+      )
+
+      invariant(
+        match,
+        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+      )
+
+      return opts.select ? opts.select(match as any) : match
+    },
+  })
+
+  return matchSelection as TSelected
+}

package/src/useNavigate.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useMatch } from './Matches'
+import { useMatch } from './useMatch'
 import { useRouter } from './useRouter'
 
 import type { FromPathOption, NavigateOptions } from './link'

package/src/useParams.tsx

@@ -1,4 +1,4 @@
-import { useMatch } from './Matches'
+import { useMatch } from './useMatch'
 import type { AnyRoute } from './route'
 import type { AllParams, RouteById, RouteIds } from './routeInfo'
 import type { RegisteredRouter } from './router'

package/src/useRouteContext.ts

@@ -1,4 +1,4 @@
-import { useMatch } from './Matches'
+import { useMatch } from './useMatch'
 import type { MakeRouteMatch } from './Matches'
 import type { AnyRoute } from './route'
 import type { RouteById, RouteIds } from './routeInfo'

package/src/useSearch.tsx

@@ -1,4 +1,4 @@
-import { useMatch } from './Matches'
+import { useMatch } from './useMatch'
 import type { AnyRoute, RootSearchSchema } from './route'
 import type { FullSearchSchema, RouteById, RouteIds } from './routeInfo'
 import type { RegisteredRouter } from './router'