@depup/tanstack__react-router 1.168.10-depup.1 → 1.168.13-depup.0

package/src/CatchBoundary.tsx

@@ -36,9 +36,19 @@ class CatchBoundaryImpl extends React.Component<{
   }) => React.ReactNode
   onCatch?: (error: Error, errorInfo: ErrorInfo) => void
 }> {
-  state = { error: null } as { error: Error | null; resetKey: string }
-  static getDerivedStateFromProps(props: any) {
-    return { resetKey: props.getResetKey() }
+  state = { error: null } as { error: Error | null; resetKey?: string | number }
+
+  static getDerivedStateFromProps(
+    props: { getResetKey: () => string | number },
+    state: { resetKey?: string | number; error: Error | null },
+  ) {
+    const resetKey = props.getResetKey()
+
+    if (state.error && state.resetKey !== resetKey) {
+      return { resetKey, error: null }
+    }
+
+    return { resetKey }
   }
   static getDerivedStateFromError(error: Error) {
     return { error }
@@ -46,30 +56,14 @@ class CatchBoundaryImpl extends React.Component<{
   reset() {
     this.setState({ error: null })
   }
-  componentDidUpdate(
-    prevProps: Readonly<{
-      getResetKey: () => string
-      children: (props: { error: any; reset: () => void }) => any
-      onCatch?: ((error: any, info: any) => void) | undefined
-    }>,
-    prevState: any,
-  ): void {
-    if (prevState.error && prevState.resetKey !== this.state.resetKey) {
-      this.reset()
-    }
-  }
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     if (this.props.onCatch) {
       this.props.onCatch(error, errorInfo)
     }
   }
   render() {
-    // If the resetKey has changed, don't render the error
     return this.props.children({
-      error:
-        this.state.resetKey !== this.props.getResetKey()
-          ? null
-          : this.state.error,
+      error: this.state.error,
       reset: () => {
         this.reset()
       },

package/src/Match.tsx

@@ -259,6 +259,22 @@ export const MatchInner = React.memo(function MatchInnerImpl({
 }): any {
   const router = useRouter()
 
+  const getMatchPromise = (
+    match: {
+      id: string
+      _nonReactive: {
+        displayPendingPromise?: Promise<void>
+        minPendingPromise?: Promise<void>
+        loadPromise?: Promise<void>
+      }
+    },
+    key: 'displayPendingPromise' | 'minPendingPromise' | 'loadPromise',
+  ) => {
+    return (
+      router.getMatch(match.id)?._nonReactive[key] ?? match._nonReactive[key]
+    )
+  }
+
   if (isServer ?? router.isServer) {
     const match = router.stores.activeMatchStoresById.get(matchId)?.state
     if (!match) {
@@ -287,15 +303,15 @@ export const MatchInner = React.memo(function MatchInnerImpl({
     const out = Comp ? <Comp key={key} /> : <Outlet />
 
     if (match._displayPending) {
-      throw router.getMatch(match.id)?._nonReactive.displayPendingPromise
+      throw getMatchPromise(match, 'displayPendingPromise')
     }
 
     if (match._forcePending) {
-      throw router.getMatch(match.id)?._nonReactive.minPendingPromise
+      throw getMatchPromise(match, 'minPendingPromise')
     }
 
     if (match.status === 'pending') {
-      throw router.getMatch(match.id)?._nonReactive.loadPromise
+      throw getMatchPromise(match, 'loadPromise')
     }
 
     if (match.status === 'notFound') {
@@ -317,7 +333,7 @@ export const MatchInner = React.memo(function MatchInnerImpl({
 
         invariant()
       }
-      throw router.getMatch(match.id)?._nonReactive.loadPromise
+      throw getMatchPromise(match, 'loadPromise')
     }
 
     if (match.status === 'error') {
@@ -384,11 +400,11 @@ export const MatchInner = React.memo(function MatchInnerImpl({
   }, [key, route.options.component, router.options.defaultComponent])
 
   if (match._displayPending) {
-    throw router.getMatch(match.id)?._nonReactive.displayPendingPromise
+    throw getMatchPromise(match, 'displayPendingPromise')
   }
 
   if (match._forcePending) {
-    throw router.getMatch(match.id)?._nonReactive.minPendingPromise
+    throw getMatchPromise(match, 'minPendingPromise')
   }
 
   // see also hydrate() in packages/router-core/src/ssr/ssr-client.ts
@@ -413,7 +429,7 @@ export const MatchInner = React.memo(function MatchInnerImpl({
         }
       }
     }
-    throw router.getMatch(match.id)?._nonReactive.loadPromise
+    throw getMatchPromise(match, 'loadPromise')
   }
 
   if (match.status === 'notFound') {
@@ -428,8 +444,10 @@ export const MatchInner = React.memo(function MatchInnerImpl({
   }
 
   if (match.status === 'redirected') {
-    // Redirects should be handled by the router transition. If we happen to
-    // encounter a redirect here, it's a bug. Let's warn, but render nothing.
+    // A match can be observed as redirected during an in-flight transition,
+    // especially when pending UI is already rendering. Suspend on the match's
+    // load promise so React can abandon this stale render and continue the
+    // redirect transition.
     if (!isRedirect(match.error)) {
       if (process.env.NODE_ENV !== 'production') {
         throw new Error('Invariant failed: Expected a redirect error')
@@ -438,11 +456,7 @@ export const MatchInner = React.memo(function MatchInnerImpl({
       invariant()
     }
 
-    // warning(
-    //   false,
-    //   'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',
-    // )
-    throw router.getMatch(match.id)?._nonReactive.loadPromise
+    throw getMatchPromise(match, 'loadPromise')
   }
 
   if (match.status === 'error') {

package/src/Matches.tsx

@@ -22,11 +22,8 @@ import type {
   MakeRouteMatchUnion,
   MaskOptions,
   MatchRouteOptions,
-  NoInfer,
   RegisteredRouter,
-  ResolveRelativePath,
   ResolveRoute,
-  RouteByPath,
   ToSubOptionsProps,
 } from '@tanstack/router-core'
 
@@ -180,10 +177,9 @@ export type MakeMatchRouteOptions<
   // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
   children?:
     | ((
-        params?: RouteByPath<
-          TRouter['routeTree'],
-          ResolveRelativePath<TFrom, NoInfer<TTo>>
-        >['types']['allParams'],
+        params?: Expand<
+          ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']
+        >,
       ) => React.ReactNode)
     | React.ReactNode
 }

package/src/link.tsx

@@ -64,6 +64,7 @@ export function useLinkProps<
     to,
     preload: userPreload,
     preloadDelay: userPreloadDelay,
+    preloadIntentProximity: _preloadIntentProximity,
     hashScrollIntoView,
     replace,
     startTransition,