fix(router-core): useBlocker navigation issues for 404 pages and external URLs (#4917)

Author: jiji-hoon96

packages/react-router/eslint.config.ts

@@ -19,6 +19,7 @@ export default [
       '@eslint-react/dom/no-missing-button-type': 'off',
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
+      '@typescript-eslint/no-unnecessary-condition': 'off',
     },
   },
 ]

packages/react-router/src/useBlocker.tsx

@@ -179,20 +179,34 @@ export function useBlocker(
         const parsedLocation = router.parseLocation(location)
         const matchedRoutes = router.getMatchedRoutes(parsedLocation.pathname)
         if (matchedRoutes.foundRoute === undefined) {
-          throw new Error(`No route found for location ${location.href}`)
+          return {
+            routeId: '__notFound__',
+            fullPath: parsedLocation.pathname,
+            pathname: parsedLocation.pathname,
+            params: matchedRoutes.routeParams,
+            search: router.options.parseSearch(location.search),
+          }
         }
+
         return {
           routeId: matchedRoutes.foundRoute.id,
           fullPath: matchedRoutes.foundRoute.fullPath,
           pathname: parsedLocation.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

@@ -7,6 +7,7 @@ import { z } from 'zod'
 import {
   RouterProvider,
   createBrowserHistory,
+  createMemoryHistory,
   createRootRoute,
   createRoute,
   createRouter,
@@ -440,4 +441,156 @@ describe('useBlocker', () => {
 
     expect(window.location.pathname).toBe('/invoices')
   })
+
+  test('should allow navigation from 404 page when blocker is active', async () => {
+    const rootRoute = createRootRoute({
+      notFoundComponent: function 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: function 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')
+  })
+
+  test('navigate function should handle external URLs with ignoreBlocker', async () => {
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <div>Home</div>,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute]),
+      history: createMemoryHistory({
+        initialEntries: ['/'],
+      }),
+    })
+
+    await expect(
+      router.navigate({
+        to: 'https://example.com',
+        ignoreBlocker: true,
+      }),
+    ).resolves.toBeUndefined()
+
+    await expect(
+      router.navigate({
+        to: 'https://example.com',
+      }),
+    ).resolves.toBeUndefined()
+  })
 })

packages/router-core/src/router.ts

@@ -1974,7 +1974,7 @@ export class RouterCore<
    *
    * @link https://tanstack.com/router/latest/docs/framework/react/api/router/NavigateOptionsType
    */
-  navigate: NavigateFn = ({ to, reloadDocument, href, ...rest }) => {
+  navigate: NavigateFn = async ({ to, reloadDocument, href, ...rest }) => {
     if (!reloadDocument && href) {
       try {
         new URL(`${href}`)
@@ -1987,6 +1987,26 @@ export class RouterCore<
         const location = this.buildLocation({ to, ...rest } as any)
         href = location.url
       }
+
+      // Check blockers for external URLs unless ignoreBlocker is true
+      if (!rest.ignoreBlocker) {
+        // Cast to access internal getBlockers method
+        const historyWithBlockers = this.history as any
+        const blockers = historyWithBlockers.getBlockers?.() ?? []
+        for (const blocker of blockers) {
+          if (blocker?.blockerFn) {
+            const shouldBlock = await blocker.blockerFn({
+              currentLocation: this.latestLocation,
+              nextLocation: this.latestLocation, // External URLs don't have a next location in our router
+              action: 'PUSH',
+            })
+            if (shouldBlock) {
+              return Promise.resolve()
+            }
+          }
+        }
+      }
+
       if (rest.replace) {
         window.location.replace(href)
       } else {

packages/solid-router/src/useBlocker.tsx

@@ -188,7 +188,13 @@ export function useBlocker(
         const parsedLocation = router.parseLocation(location)
         const matchedRoutes = router.getMatchedRoutes(parsedLocation.pathname)
         if (matchedRoutes.foundRoute === undefined) {
-          throw new Error(`No route found for location ${location.href}`)
+          return {
+            routeId: '__notFound__',
+            fullPath: parsedLocation.pathname,
+            pathname: parsedLocation.pathname,
+            params: matchedRoutes.routeParams,
+            search: parsedLocation.search,
+          }
         }
         return {
           routeId: matchedRoutes.foundRoute.id,
@@ -202,6 +208,13 @@ export function useBlocker(
       const current = getLocation(blockerFnArgs.currentLocation)
       const next = getLocation(blockerFnArgs.nextLocation)
 
+      if (
+        current.routeId === '__notFound__' &&
+        next.routeId !== '__notFound__'
+      ) {
+        return false
+      }
+
       const shouldBlock = await props.shouldBlockFn({
         action: blockerFnArgs.action,
         current,