fix(react-router): allow defaultHref navigation on direct deep-link to tab child pages

Author: ShaneK

packages/react-router/src/ReactRouter/IonRouter.tsx

@@ -546,9 +546,9 @@ export const IonRouter = ({ children, registerHistoryListener }: PropsWithChildr
    * @param routeAnimation A custom animation builder to override the
    * default "back" animation.
    */
-  const handleNavigateBack = (defaultHref: string | RouteInfo = '/', routeAnimation?: AnimationBuilder) => {
+  const handleNavigateBack = (defaultHref?: string | RouteInfo, routeAnimation?: AnimationBuilder) => {
     const config = getConfig();
-    defaultHref = defaultHref ? defaultHref : config && config.get('backButtonDefaultHref' as any);
+    defaultHref = defaultHref ?? (config && config.get('backButtonDefaultHref' as any));
     const routeInfo = locationHistory.current.current();
     // It's a linear navigation.
     if (routeInfo && routeInfo.pushedByRoute) {
@@ -590,17 +590,18 @@ export const IonRouter = ({ children, registerHistoryListener }: PropsWithChildr
          * `pushedByRoute` exists, but no corresponding previous entry in
          * the history stack.
          */
-      } else {
+      } else if (defaultHref) {
         handleNavigate(defaultHref as string, 'pop', 'back', routeAnimation);
       }
       /**
        * No `pushedByRoute` (e.g., initial page load or tab root).
-       * Tabs with no back history should not navigate.
+       * Navigate to defaultHref so the back button works on direct
+       * deep-link loads (e.g., loading /tab1/child directly).
+       * Only navigate when defaultHref is explicitly set. The core
+       * back-button component hides itself when no defaultHref is
+       * provided, so a click here means the user set one intentionally.
        */
-    } else {
-      if (routeInfo && routeInfo.tab) {
-        return;
-      }
+    } else if (defaultHref) {
       handleNavigate(defaultHref as string, 'pop', 'back', routeAnimation);
     }
   };

packages/react-router/test/base/src/pages/tabs/Tabs.tsx

@@ -64,7 +64,7 @@ const Tab1Child1 = () => {
       <IonHeader>
         <IonToolbar>
           <IonButtons slot="start">
-            <IonBackButton />
+            <IonBackButton defaultHref="/tabs/tab1" />
           </IonButtons>
           <IonTitle>Tab1</IonTitle>
         </IonToolbar>

packages/react-router/test/base/tests/e2e/playwright/tabs.spec.ts

@@ -64,6 +64,16 @@ test.describe('Tabs', () => {
     await expect(page.locator('ion-tab-button.tab-selected')).toContainText('Tab1');
   });
 
+  // Verifies that defaultHref works on direct deep-link load of a tab child page
+  test('back button defaultHref should work on direct deep-link load of tab child page', async ({ page }) => {
+    await page.goto(withTestingMode('/tabs/tab1/child'));
+    await ionPageVisible(page, 'tab1child1');
+
+    await ionBackClick(page, 'tab1child1');
+    await ionPageVisible(page, 'tab1');
+    await expect(page).toHaveURL(/\/tabs\/tab1$/);
+  });
+
   // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23087
   test('should return to correct view and url when going back from child page after switching tabs', async ({ page }) => {
     await page.goto(withTestingMode('/tabs/tab1'));