fix(react-router): sync URL with display on browser back after tab switch

Author: ShaneK

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

@@ -272,6 +272,13 @@ export const IonRouter = ({ children, registerHistoryListener }: PropsWithChildr
                 routeAction: 'pop',
                 routeDirection: 'back',
               };
+            } else if (prevInfo && prevInfo.pathname !== location.pathname && currentRoute.tab) {
+              // Browser POP destination differs from within-tab back target.
+              // Sync URL via replace, like handleNavigateBack's non-linear path (#25141).
+              incomingRouteParams.current = { ...prevInfo, routeAction: 'pop', routeDirection: 'back' };
+              forwardStack.current = [];
+              handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', undefined, undefined, prevInfo.tab);
+              return;
             } else {
               incomingRouteParams.current = { ...prevInfo, routeAction: 'pop', routeDirection: 'back' };
             }

packages/react-router/test/apps/reactrouter6/package.json

@@ -30,7 +30,7 @@
     "test": "cypress open",
     "cypress": "node_modules/.bin/cypress run --headless --browser chrome",
     "cypress.open": "cypress open",
-    "e2e": "concurrently \"serve -s build -l 3000\" \"wait-on http-get://localhost:3000 && npm run cypress\" --kill-others --success first",
+    "e2e": "concurrently \"serve -s dist -l 3000\" \"wait-on http-get://localhost:3000 && npm run cypress\" --kill-others --success first",
     "playwright": "npx playwright test",
     "playwright.open": "npx playwright test --ui",
     "playwright.headed": "npx playwright test --headed",

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

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 import {
   ionPageVisible, ionPageHidden, ionPageDoesNotExist,
-  ionNav, ionBackClick, ionTabClick, withTestingMode
+  ionNav, ionBackClick, ionTabClick, ionGoBack, withTestingMode
 } from './utils/test-utils';
 
 test.describe('Tabs', () => {
@@ -36,6 +36,34 @@ test.describe('Tabs', () => {
     await ionPageDoesNotExist(page, 'tab1');
   });
 
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/25141
+  test('browser back from preserved child page should sync URL and display', async ({ page }, testInfo) => {
+    testInfo.annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/25141',
+    });
+
+    await page.goto(withTestingMode('/tabs/tab1'));
+    await ionPageVisible(page, 'tab1');
+
+    await page.locator('#child-one').click();
+    await ionPageHidden(page, 'tab1');
+    await ionPageVisible(page, 'tab1child1');
+
+    await ionTabClick(page, 'Tab2');
+    await ionPageHidden(page, 'tab1child1');
+    await ionPageVisible(page, 'tab2');
+
+    await ionTabClick(page, 'Tab1');
+    await ionPageHidden(page, 'tab2');
+    await ionPageVisible(page, 'tab1child1');
+
+    await ionGoBack(page, '/tabs/tab1');
+    await ionPageDoesNotExist(page, 'tab1child1');
+    await ionPageVisible(page, 'tab1');
+    await expect(page.locator('ion-tab-button.tab-selected')).toContainText('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'));