fix(react-router): scope push cleanup to explicitly preserved views

Author: ShaneK

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

@@ -113,6 +113,15 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
    * duplicate transitions during rapid navigation (e.g., Navigate redirects)
    */
   private lastTransition?: { enteringId: string; leavingId?: string };
+  /**
+   * Views that have been explicitly kept alive by the pop-preserve logic
+   * (shouldPreserveLeavingView) so a future forward-pop can restore their React
+   * state. These are candidates for cleanup when a fresh push invalidates the
+   * forward-history path that made them reachable. Views mounted through
+   * normal forward-push (which keeps the leaving view alive by default) are
+   * NOT tracked here.
+   */
+  private preservedViewItems = new Set<ViewItem>();
   /** Tracks whether the component is mounted to guard async transition paths. */
   private _isMounted = false;
   /** In-flight requestAnimationFrame IDs from transitionPage, cancelled on unmount. */
@@ -505,6 +514,9 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
     if (!enteringViewItem.mount) {
       enteringViewItem.mount = true;
     }
+    // A view that becomes the entering view is no longer a stale preserved view.
+    // It's back in the active navigation path, so drop it from the cleanup set.
+    this.preservedViewItems.delete(enteringViewItem);
 
     // Check visibility state BEFORE showing entering view
     const enteringWasVisible = enteringViewItem.ionPageElement && isViewVisible(enteringViewItem.ionPageElement);
@@ -581,6 +593,8 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
         routeInfo.routeAction === 'pop' && isViewItemPreservableOnPop(leavingViewItem);
       if (routeInfo.routeAction !== 'replace' && !shouldPreserveLeavingView) {
         leavingViewItem.mount = false;
+      } else if (shouldPreserveLeavingView) {
+        this.preservedViewItems.add(leavingViewItem);
       }
       this.handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem);
     }
@@ -595,9 +609,11 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
   }
 
   /**
-   * Unmounts any previously-preserved leaf views in this outlet when a push
-   * action invalidates the forward history path. Runs only on `push` (not
-   * replace/pop) and skips the entering and leaving view items.
+   * Unmounts views previously kept alive by the pop-preserve logic when a fresh
+   * push invalidates the forward-history path that made them reachable. Only
+   * iterates views explicitly tracked in `preservedViewItems` so that views
+   * naturally mounted through forward-push (the default leaving-view behavior)
+   * are left untouched.
    */
   private cleanupPreservedViewsOnPush(
     routeInfo: RouteInfo,
@@ -607,19 +623,21 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
     if (routeInfo.routeAction !== 'push') {
       return;
     }
+    if (this.preservedViewItems.size === 0) {
+      return;
+    }
 
-    const allViews = this.context.getViewItemsForOutlet(this.id);
-    for (const viewItem of allViews) {
+    for (const viewItem of Array.from(this.preservedViewItems)) {
       if (viewItem === enteringViewItem || viewItem === leavingViewItem) {
+        this.preservedViewItems.delete(viewItem);
         continue;
       }
       if (!viewItem.mount) {
-        continue;
-      }
-      if (!isViewItemPreservableOnPop(viewItem)) {
+        this.preservedViewItems.delete(viewItem);
         continue;
       }
       viewItem.mount = false;
+      this.preservedViewItems.delete(viewItem);
       const viewToUnmount = viewItem;
       setTimeout(() => {
         this.context.unMountViewItem(viewToUnmount);
@@ -863,6 +881,8 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
           routeInfo.routeAction === 'pop' && isViewItemPreservableOnPop(leavingViewItem);
         if (routeInfo.routeAction !== 'replace' && !shouldPreserveLeavingView) {
           leavingViewItem.mount = false;
+        } else if (shouldPreserveLeavingView) {
+          this.preservedViewItems.add(leavingViewItem);
         }
         this.handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem);
       }
@@ -904,6 +924,8 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
             routeInfo.routeAction === 'pop' && isViewItemPreservableOnPop(latestLeavingView);
           if (routeInfo.routeAction !== 'replace' && !shouldPreserveLeavingView) {
             latestLeavingView.mount = false;
+          } else if (shouldPreserveLeavingView) {
+            this.preservedViewItems.add(latestLeavingView);
           }
           this.handleLeavingViewUnmount(routeInfo, latestEnteringView, latestLeavingView);
         }
@@ -1010,6 +1032,7 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
       this.outOfScopeUnmountTimeout = undefined;
     }
     this.waitingForIonPage = false;
+    this.preservedViewItems.clear();
 
     // Hide all views in this outlet before clearing.
     // This is critical for nested outlets - when the parent component unmounts,
@@ -1137,6 +1160,8 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
           routeInfo.routeAction === 'pop' && isViewItemPreservableOnPop(leavingViewItem);
         if (shouldUnmountLeavingViewItem && !shouldPreserveLeavingView) {
           leavingViewItem.mount = false;
+        } else if (shouldUnmountLeavingViewItem && shouldPreserveLeavingView) {
+          this.preservedViewItems.add(leavingViewItem);
         }
       }
     }