fix(react-router): navigate if redirect is thrown in component

TanStack · Jan 3, 2025 · b9c2da2 · b9c2da2
1 parent 5c8c38a
commit b9c2da2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/react-router/src/CatchBoundary.tsx b/packages/react-router/src/CatchBoundary.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react'
+import { useRouter } from './useRouter'
+import { isRedirect } from './redirects'
 import type { ErrorRouteComponent } from './route'
 import type { ErrorInfo } from 'react'
 
@@ -9,13 +11,19 @@ export function CatchBoundary(props: {
   onCatch?: (error: Error, errorInfo: ErrorInfo) => void
 }) {
   const errorComponent = props.errorComponent ?? ErrorComponent
+  const router = useRouter()
 
   return (
     <CatchBoundaryImpl
       getResetKey={props.getResetKey}
       onCatch={props.onCatch}
       children={({ error, reset }) => {
         if (error) {
+          if (isRedirect(error)) {
+            const redirect = router.resolveRedirect(error)
+            router.navigate({ ...redirect, replace: true, ignoreBlocker: true })
+            return null
+          }
           return React.createElement(errorComponent, {
             error,
             reset,

diff --git a/packages/react-router/src/router.ts b/packages/react-router/src/router.ts
@@ -2696,7 +2696,11 @@ export class Router<
                           }))
                         } catch (err) {
                           if (isResolvedRedirect(err)) {
-                            await this.navigate(err)
+                            await this.navigate({
+                              ...err,
+                              replace: true,
+                              ignoreBlocker: true,
+                            })
                           }
                         }
                       })()