fix(react-router): do not unnecessarily render notFoundComponent (#2480)

Co-authored-by: Igor Golovin <igolovin@natera.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

packages/react-router/src/not-found.tsx

@@ -52,9 +52,13 @@ export function CatchNotFound(props: {
           throw error
         }
       }}
-      errorComponent={({ error }: { error: NotFoundError }) =>
-        props.fallback?.(error)
-      }
+      errorComponent={({ error }: { error: Error }) => {
+        if (isNotFound(error)) {
+          return props.fallback?.(error)
+        } else {
+          throw error
+        }
+      }}
     >
       {props.children}
     </CatchBoundary>

packages/react-router/tests/link.test.tsx

@@ -1095,6 +1095,37 @@ describe('Link', () => {
     expect(errorText).toBeInTheDocument()
   })
 
+  test('when navigating to the root with an error in component', async () => {
+    const notFoundComponent = vi.fn()
+
+    const rootRoute = createRootRoute({
+      errorComponent: () => <span>Expected rendering error message</span>,
+      notFoundComponent,
+    })
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => {
+        throw new Error(
+          'Error from component should not render notFoundComponent',
+        )
+      },
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute]),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const errorText = await screen.findByText(
+      'Expected rendering error message',
+    )
+    expect(errorText).toBeInTheDocument()
+    expect(notFoundComponent).not.toBeCalled()
+  })
+
   test('when navigating to /posts with params', async () => {
     const rootRoute = createRootRoute()
     const indexRoute = createRoute({