fix: errorComponent opt-out / bubbling

TanStack · Nov 30, 2023 · 883f608 · 883f608
1 parent 5905f5d
commit 883f608
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 28 deletions.
diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx
@@ -134,13 +134,14 @@ class NotFoundError extends Error {}
 const postRoute = new Route({
   getParentRoute: () => postsRoute,
   path: '$postId',
-  errorComponent: ({ error }) => {
-    if (error instanceof NotFoundError) {
-      return <div>{error.message}</div>
-    }
-
-    return <ErrorComponent error={error} />
-  },
+  // errorComponent: false,
+  // errorComponent: ({ error }) => {
+  //   if (error instanceof NotFoundError) {
+  //     return <div>{error.message}</div>
+  //   }
+
+  //   return <ErrorComponent error={error} />
+  // },
   // Only reload the data if we are entering the route
   shouldReload: ({ cause }) => cause === 'enter',
   loader: ({ params }) => fetchPost(params.postId),

diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
@@ -74,18 +74,20 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
     ? React.Suspense
     : SafeFragment
 
-  const errorComponent = React.useCallback(
-    (props: any) => {
-      return React.createElement(routeErrorComponent, {
-        ...props,
-        useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams,
-      })
-    },
-    [route],
-  )
+  const errorComponent = routeErrorComponent
+    ? React.useCallback(
+        (props: any) => {
+          return React.createElement(routeErrorComponent, {
+            ...props,
+            useMatch: route.useMatch,
+            useRouteContext: route.useRouteContext,
+            useSearch: route.useSearch,
+            useParams: route.useParams,
+          })
+        },
+        [route],
+      )
+    : undefined
 
   return (
     <matchesContext.Provider value={matches}>
@@ -97,15 +99,21 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
           useParams: route.useParams,
         })}
       >
-        <CatchBoundary
-          resetKey={locationKey}
-          errorComponent={errorComponent}
-          onCatch={() => {
-            warning(false, `Error in route match: ${match.id}`)
-          }}
-        >
-          <MatchInner match={match} />
-        </CatchBoundary>
+        {errorComponent ? (
+          <CatchBoundary
+            resetKey={locationKey}
+            errorComponent={errorComponent}
+            onCatch={() => {
+              warning(false, `Error in route match: ${match.id}`)
+            }}
+          >
+            <MatchInner match={match} />
+          </CatchBoundary>
+        ) : (
+          <SafeFragment>
+            <MatchInner match={match} />
+          </SafeFragment>
+        )}
       </ResolvedSuspenseBoundary>
     </matchesContext.Provider>
   )