From a17b9631829c36c2daf1d5227f5afa69f99f8743 Mon Sep 17 00:00:00 2001
From: Alexander Harding <2166114+aeharding@users.noreply.github.com>
Date: Mon, 11 Dec 2023 15:09:41 -0600
Subject: [PATCH] fix(react): replacing route uses new route direction and
 animation (#28671)

Issue number: resolves #24260

---------

<!-- 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?

When replacing a route (`router.push(newRoute, 'none', 'replace')`) the
`RouterDirection` from the route being replaced is being used (if it
exists) instead of the new one the user specifies.

## What is the new behavior?

User-specified `RouteDirection` is used, if it exists. If it doesn't it
falls back to the `RouteDirection` of the route being replaced.

## 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

Please see the following comment for why I think the current behavior is
incorrect, and why this change is needed:
https://github.com/ionic-team/ionic-framework/issues/24260#issuecomment-1078960780

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 packages/react-router/src/ReactRouter/IonRouter.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-router/src/ReactRouter/IonRouter.tsx b/packages/react-router/src/ReactRouter/IonRouter.tsx
index a21d53c045..fcadd6561a 100644
--- a/packages/react-router/src/ReactRouter/IonRouter.tsx
+++ b/packages/react-router/src/ReactRouter/IonRouter.tsx
@@ -187,8 +187,15 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
           routeInfo.lastPathname = currentRouteInfo?.pathname || routeInfo.lastPathname;
           routeInfo.prevRouteLastPathname = currentRouteInfo?.lastPathname;
           routeInfo.pushedByRoute = pushedByRoute;
-          routeInfo.routeDirection = currentRouteInfo?.routeDirection || routeInfo.routeDirection;
-          routeInfo.routeAnimation = currentRouteInfo?.routeAnimation || routeInfo.routeAnimation;
+
+          /**
+           * When replacing routes we should still prefer
+           * any custom direction/animation that the developer
+           * has specified when navigating first instead of relying
+           * on previously used directions/animations.
+           */
+          routeInfo.routeDirection = routeInfo.routeDirection || currentRouteInfo?.routeDirection;
+          routeInfo.routeAnimation = routeInfo.routeAnimation || currentRouteInfo?.routeAnimation;
         }
 
         this.locationHistory.add(routeInfo);