From fc88613fefa019a3b695a2c6e10c85cd3ce79ae8 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 11 Dec 2023 12:31:27 -0500
Subject: [PATCH] fix(react): use custom animation when going back after a
 replace (#28674)

Issue number: resolves #28673

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When reviewing https://github.com/ionic-team/ionic-framework/pull/28671
I noticed a bug where the custom animation was not used when going back
after a replace.

`handleNavigate` will override whatever is in `incomingRouteParams`.
Since we were passing `routeAnimation` (which is `undefined`), it was
overriding the animation we set in `handleNavigateBack`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `routeAnimation` is no longer overridden

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.6.1-dev.11702048520.13c82dad`
---
 packages/react-router/src/ReactRouter/IonRouter.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-router/src/ReactRouter/IonRouter.tsx b/packages/react-router/src/ReactRouter/IonRouter.tsx
index 16b81d64e2..a21d53c045 100644
--- a/packages/react-router/src/ReactRouter/IonRouter.tsx
+++ b/packages/react-router/src/ReactRouter/IonRouter.tsx
@@ -244,11 +244,17 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
     if (routeInfo && routeInfo.pushedByRoute) {
       const prevInfo = this.locationHistory.findLastLocation(routeInfo);
       if (prevInfo) {
+        /**
+         * This needs to be passed to handleNavigate
+         * otherwise incomingRouteParams.routeAnimation
+         * will be overridden.
+         */
+        const incomingAnimation = routeAnimation || routeInfo.routeAnimation;
         this.incomingRouteParams = {
           ...prevInfo,
           routeAction: 'pop',
           routeDirection: 'back',
-          routeAnimation: routeAnimation || routeInfo.routeAnimation,
+          routeAnimation: incomingAnimation,
         };
         if (
           routeInfo.lastPathname === routeInfo.pushedByRoute ||
@@ -270,7 +276,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
           const goBack = history.goBack || history.back;
           goBack();
         } else {
-          this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', routeAnimation);
+          this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', incomingAnimation);
         }
       } else {
         this.handleNavigate(defaultHref as string, 'pop', 'back', routeAnimation);