fix(react-router): use current route as leaving location for all navigation actions

Author: ShaneK

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

@@ -187,29 +187,12 @@ export const IonRouter = ({ children, registerHistoryListener }: PropsWithChildr
   const handleHistoryChange = (location: HistoryLocation, action: HistoryAction) => {
     let leavingLocationInfo: RouteInfo;
     /**
-     * A programmatic navigation was triggered.
-     * e.g., `<Navigate />`, `navigate()`, or `handleNavigate()`
+     * The leaving location is always the current route, for both programmatic
+     * and external navigations. Using `previous()` for replace actions was
+     * incorrect: it caused the equality check below to skip navigation when
+     * the replace destination matched the entry two slots back in history.
      */
-    if (incomingRouteParams.current) {
-      /**
-       * The current history entry is overwritten, so the previous entry
-       * is the one we are leaving.
-       */
-      if (incomingRouteParams.current?.routeAction === 'replace') {
-        leavingLocationInfo = locationHistory.current.previous();
-      } else {
-        // If the action is 'push' or 'pop', we want to use the current route.
-        leavingLocationInfo = locationHistory.current.current();
-      }
-    } else {
-      /**
-       * An external navigation was triggered
-       * e.g., browser back/forward button or direct link
-       *
-       * The leaving location is the current route.
-       */
-      leavingLocationInfo = locationHistory.current.current();
-    }
+    leavingLocationInfo = locationHistory.current.current();
 
     const leavingUrl = leavingLocationInfo.pathname + leavingLocationInfo.search;
     if (leavingUrl !== location.pathname + location.search) {

packages/react-router/test/base/src/pages/replace-action/Replace.tsx

@@ -7,6 +7,7 @@ import {
   IonButton,
   IonButtons,
   IonBackButton,
+  useIonRouter,
 } from '@ionic/react';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -24,7 +25,7 @@ const Page1: React.FC = () => (
       </IonToolbar>
     </IonHeader>
     <IonContent>
-      <IonButton routerLink={'/replace-action/page2'}>Goto Page2</IonButton>
+      <IonButton id="go-to-page2" routerLink={'/replace-action/page2'}>Goto Page2</IonButton>
     </IonContent>
   </IonPage>
 );
@@ -47,13 +48,15 @@ const Page2: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        <IonButton onClick={() => clickButton()}>Goto Page3</IonButton>
+        <IonButton id="go-to-page3" onClick={() => clickButton()}>Goto Page3</IonButton>
       </IonContent>
     </IonPage>
   );
 };
 
 const Page3: React.FC = () => {
+  const ionRouter = useIonRouter();
+
   return (
     <IonPage data-pageid="page3">
       <IonHeader>
@@ -67,6 +70,11 @@ const Page3: React.FC = () => {
       <IonContent>
         <p>Page 3</p>
         <p>Note: The back button navigates to Page 1 (not Page 2) because Page 2 used replace navigation.</p>
+        {/* Exercises the replace action path through Ionic's handleNavigate() to
+            reproduce the scenario fixed in issue #30086. */}
+        <IonButton id="replace-to-page1" onClick={() => ionRouter.push('/replace-action/page1', 'none', 'replace')}>
+          Replace to Page1
+        </IonButton>
       </IonContent>
     </IonPage>
   );

packages/react-router/test/base/tests/e2e/playwright/replace-to-existing.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+import { ionPageVisible, ionPageDoesNotExist } from './utils/test-utils';
+
+test.describe('Replace to Existing Page', () => {
+  /**
+   * Regression test for #30086:
+   * Replace navigate to a page already in the Ionic location history silently
+   * fails when using Ionic's handleNavigate() (useIonRouter.push with routeAction='replace').
+   *
+   * Route sequence: /page1 --(push)--> /page2 --(replace)--> /page3
+   * From /page3, replace back to /page1 should succeed.
+   *
+   * Note: This test intentionally does NOT use withTestingMode() because
+   * `?ionic:_testing=true` in the URL would cause a search param mismatch that
+   * prevents the bug scenario from triggering.
+   */
+  test('replace navigate to a page already in location history should succeed', async ({ page }) => {
+    // Navigate WITHOUT ionic:_testing=true — search params must be empty to match
+    // the replace destination exactly and reproduce the bug scenario.
+    await page.goto('/replace-action/page1');
+    await ionPageVisible(page, 'page1');
+
+    // 1. Push to page2
+    await page.locator('#go-to-page2').click();
+    await ionPageVisible(page, 'page2');
+
+    // 2. Replace page2 with page3
+    await page.locator('#go-to-page3').click();
+    await ionPageVisible(page, 'page3');
+    await ionPageDoesNotExist(page, 'page2');
+
+    // 3. Replace page3 back to page1 — destination matches the previous() entry,
+    //    which was the bug trigger (#30086).
+    await page.locator('#replace-to-page1').click();
+    await ionPageVisible(page, 'page1');
+    await expect(page).toHaveURL(/\/replace-action\/page1/);
+    await ionPageDoesNotExist(page, 'page3');
+  });
+});