feat: add blocker support for external URL navigation with ignoreBlocker option

Author: jiji-hoon96

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

@@ -7,6 +7,7 @@ import { z } from 'zod'
 import {
   RouterProvider,
   createBrowserHistory,
+  createMemoryHistory,
   createRootRoute,
   createRoute,
   createRouter,
@@ -563,4 +564,33 @@ describe('useBlocker', () => {
 
     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

@@ -1778,7 +1778,7 @@ export class RouterCore<
     })
   }
 
-  navigate: NavigateFn = ({ to, reloadDocument, href, ...rest }) => {
+  navigate: NavigateFn = async ({ to, reloadDocument, href, ...rest }) => {
     if (!reloadDocument && href) {
       try {
         new URL(`${href}`)
@@ -1791,6 +1791,26 @@ export class RouterCore<
         const location = this.buildLocation({ to, ...rest } as any)
         href = this.history.createHref(location.href)
       }
+
+      // 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 {