feat: allow navigation from 404 pages when blocker is active

- #4881

Author: jiji-hoon96

packages/react-router/src/useBlocker.tsx

@@ -176,26 +176,39 @@ export function useBlocker(
       function getLocation(
         location: HistoryLocation,
       ): AnyShouldBlockFnLocation {
-        const parsedLocation = router.parseLocation(location)
-        const matchedRoutes = router.getMatchedRoutes(
-          parsedLocation.pathname,
-          undefined,
-        )
+        const pathname = location.pathname
+
+        const matchedRoutes = router.getMatchedRoutes(pathname, undefined)
+
         if (matchedRoutes.foundRoute === undefined) {
-          throw new Error(`No route found for location ${location.href}`)
+          return {
+            routeId: '__notFound__',
+            fullPath: pathname,
+            pathname: pathname,
+            params: matchedRoutes.routeParams || {},
+            search: router.options.parseSearch(location.search),
+          }
         }
+
         return {
           routeId: matchedRoutes.foundRoute.id,
           fullPath: matchedRoutes.foundRoute.fullPath,
-          pathname: parsedLocation.pathname,
+          pathname: pathname,
           params: matchedRoutes.routeParams,
-          search: parsedLocation.search,
+          search: router.options.parseSearch(location.search),
         }
       }
 
       const current = getLocation(blockerFnArgs.currentLocation)
       const next = getLocation(blockerFnArgs.nextLocation)
 
+      if (
+        current.routeId === '__notFound__' &&
+        next.routeId !== '__notFound__'
+      ) {
+        return false
+      }
+
       const shouldBlock = await shouldBlockFn({
         action: blockerFnArgs.action,
         current,

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

@@ -440,4 +440,127 @@ describe('useBlocker', () => {
 
     expect(window.location.pathname).toBe('/invoices')
   })
+
+  test('should allow navigation from 404 page when blocker is active', async () => {
+    const rootRoute = createRootRoute({
+      notFoundComponent: () => {
+        const navigate = useNavigate()
+
+        useBlocker({ shouldBlockFn: () => true })
+
+        return (
+          <>
+            <h1>Not Found</h1>
+            <button onClick={() => navigate({ to: '/' })}>Go Home</button>
+            <button onClick={() => navigate({ to: '/posts' })}>
+              Go to Posts
+            </button>
+          </>
+        )
+      },
+    })
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => {
+        return (
+          <>
+            <h1>Index</h1>
+          </>
+        )
+      },
+    })
+
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/posts',
+      component: () => {
+        return (
+          <>
+            <h1>Posts</h1>
+          </>
+        )
+      },
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postsRoute]),
+      history,
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await router.navigate({ to: '/non-existent' as any })
+
+    expect(
+      await screen.findByRole('heading', { name: 'Not Found' }),
+    ).toBeInTheDocument()
+
+    expect(window.location.pathname).toBe('/non-existent')
+
+    const homeButton = await screen.findByRole('button', { name: 'Go Home' })
+    fireEvent.click(homeButton)
+
+    expect(
+      await screen.findByRole('heading', { name: 'Index' }),
+    ).toBeInTheDocument()
+
+    expect(window.location.pathname).toBe('/')
+  })
+
+  test('should handle blocker navigation from 404 to another 404', async () => {
+    const rootRoute = createRootRoute({
+      notFoundComponent: () => {
+        const navigate = useNavigate()
+
+        useBlocker({ shouldBlockFn: () => true })
+
+        return (
+          <>
+            <h1>Not Found</h1>
+            <button onClick={() => navigate({ to: '/another-404' as any })}>
+              Go to Another 404
+            </button>
+          </>
+        )
+      },
+    })
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => {
+        return (
+          <>
+            <h1>Index</h1>
+          </>
+        )
+      },
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute]),
+      history,
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await router.navigate({ to: '/non-existent' })
+
+    expect(
+      await screen.findByRole('heading', { name: 'Not Found' }),
+    ).toBeInTheDocument()
+
+    const anotherButton = await screen.findByRole('button', {
+      name: 'Go to Another 404',
+    })
+    fireEvent.click(anotherButton)
+
+    expect(
+      await screen.findByRole('heading', { name: 'Not Found' }),
+    ).toBeInTheDocument()
+
+    expect(window.location.pathname).toBe('/non-existent')
+  })
 })