fix(react, vue): do not show back button when replacing to root page (#22750)

resolves #22528

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

@@ -174,9 +174,18 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
         } else if (routeInfo.routeAction === 'replace') {
           // Make sure to set the lastPathname, etc.. to the current route so the page transitions out
           const currentRouteInfo = this.locationHistory.current();
+
+          /**
+           * If going from /home to /child, then replacing from
+           * /child to /home, we don't want the route info to
+           * say that /home was pushed by /home which is not correct.
+           */
+          const currentPushedBy = currentRouteInfo?.pushedByRoute;
+          const pushedByRoute = (currentPushedBy !== undefined && currentPushedBy !== routeInfo.pathname) ? currentPushedBy : routeInfo.pushedByRoute;
+
           routeInfo.lastPathname = currentRouteInfo?.pathname || routeInfo.lastPathname;
           routeInfo.prevRouteLastPathname = currentRouteInfo?.lastPathname;
-          routeInfo.pushedByRoute = currentRouteInfo?.pushedByRoute || routeInfo.pushedByRoute;
+          routeInfo.pushedByRoute = pushedByRoute;
           routeInfo.routeDirection = currentRouteInfo?.routeDirection || routeInfo.routeDirection;
           routeInfo.routeAnimation = currentRouteInfo?.routeAnimation || routeInfo.routeAnimation;
         }

packages/vue-router/src/router.ts

@@ -202,8 +202,17 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
           routeInfo.pushedByRoute = lastRoute?.pushedByRoute;
         } else if (routeInfo.routerAction === 'replace') {
           const currentRouteInfo = locationHistory.current();
+
+          /**
+           * If going from /home to /child, then replacing from
+           * /child to /home, we don't want the route info to
+           * say that /home was pushed by /home which is not correct.
+           */
+          const currentPushedBy = currentRouteInfo?.pushedByRoute;
+          const pushedByRoute = (currentPushedBy !== undefined && currentPushedBy !== routeInfo.pathname) ? currentPushedBy : routeInfo.pushedByRoute;
+
           routeInfo.lastPathname = currentRouteInfo?.pathname || routeInfo.lastPathname;
-          routeInfo.pushedByRoute = currentRouteInfo?.pushedByRoute || routeInfo.pushedByRoute;
+          routeInfo.pushedByRoute = pushedByRoute;
           routeInfo.routerDirection = currentRouteInfo?.routerDirection || routeInfo.routerDirection;
           routeInfo.routerAnimation = currentRouteInfo?.routerAnimation || routeInfo.routerAnimation;
           routeInfo.prevRouteLastPathname = currentRouteInfo?.lastPathname;

packages/vue/test-app/src/views/Home.vue

@@ -2,6 +2,9 @@
   <ion-page data-pageid="home">
     <ion-header :translucent="true">
       <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
         <ion-title>Test App</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -54,12 +57,14 @@
 </template>
 
 <script lang="ts">
-import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonButtons, IonBackButton, IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'Home',
   components: {
+    IonButtons,
+    IonBackButton,
     IonContent,
     IonHeader,
     IonItem,

packages/vue/test-app/tests/e2e/specs/routing.js

@@ -176,6 +176,21 @@ describe('Routing', () => {
     cy.ionPageVisible('navigation');
     cy.ionPageHidden('routingparameter');
   });
+
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22528
+  it('should not show ion-back-button when replacing to root page', () => {
+    cy.visit('http://localhost:8080');
+
+    cy.routerPush('/navigation');
+    cy.ionPageVisible('navigation');
+    cy.ionPageHidden('home');
+
+    cy.routerReplace('/');
+    cy.ionPageDoesNotExist('navigation');
+    cy.ionPageVisible('home');
+
+    cy.ionBackButtonHidden('home');
+  });
 });
 
 describe('Routing - Swipe to Go Back', () => {

packages/vue/test-app/tests/e2e/support/commands.js

@@ -76,4 +76,17 @@ Cypress.Commands.add('routerPush', (path) => {
   cy.window().then(win => {
     win.debugRouter.push(path);
   });
-})
+});
+
+Cypress.Commands.add('routerReplace', (path) => {
+  cy.window().then(win => {
+    win.debugRouter.replace(path);
+  });
+});
+
+Cypress.Commands.add('ionBackButtonHidden', (pageId) => {
+  cy.get(`div.ion-page[data-pageid=${pageId}]`)
+    .should('be.visible', true)
+    .find('ion-back-button')
+    .should('not.be.visible')
+});