fix(react-router): prevent stale StackManager from destroying views on repeated out-of-scope transitions

Author: ShaneK

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

@@ -75,6 +75,8 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
   private waitingForIonPage = false;
   private ionPageWaitTimeout?: ReturnType<typeof setTimeout>;
   private outOfScopeUnmountTimeout?: ReturnType<typeof setTimeout>;
+  /** Whether this outlet was previously in scope. */
+  private wasInScope = true;
   /**
    * Track the last transition's entering and leaving view IDs to prevent
    * duplicate transitions during rapid navigation (e.g., Navigate redirects)
@@ -246,9 +248,20 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
    */
   private handleOutOfScopeOutlet(routeInfo: RouteInfo): boolean {
     if (!this.outletMountPath || isPathnameInScope(routeInfo.pathname, this.outletMountPath)) {
+      this.wasInScope = true;
       return false;
     }
 
+    // Only run the out-of-scope cleanup on the first transition out of scope.
+    // When parameterized routes create multiple StackManager instances with the
+    // same outlet ID, a stale (hidden) instance must not destroy views that an
+    // active instance just created. After the initial cleanup, the stale instance
+    // stays dormant until its mount path becomes in-scope again.
+    if (!this.wasInScope) {
+      return true;
+    }
+    this.wasInScope = false;
+
     if (this.outOfScopeUnmountTimeout) {
       clearTimeout(this.outOfScopeUnmountTimeout);
       this.outOfScopeUnmountTimeout = undefined;

packages/react-router/test/base/tests/e2e/playwright/nested-params.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+import { ionPageVisible, withTestingMode } from './utils/test-utils';
+
+test.describe('Nested Params', () => {
+
+  /**
+   * Regression: navigating to a parameterized route, back to landing,
+   * then to a different param, back, and to the same param again caused
+   * an infinite loop that locked up the browser.
+   *
+   * Steps: user 99 -> landing -> user 42 -> landing -> user 42 (loop)
+   */
+  test('should not infinite loop when revisiting a parameterized route after visiting a different param', async ({ page }) => {
+    // Use a tight timeout -- if the infinite loop fires, the browser locks up
+    // and this test would hang forever without it.
+    test.setTimeout(15_000);
+
+    await page.goto(withTestingMode('/nested-params'));
+    await ionPageVisible(page, 'nested-params-landing');
+
+    // Step 1: Navigate to user 99 details
+    await page.locator('#go-to-user-99').click();
+    await expect(page.getByText('Details view user: 99')).toBeVisible();
+
+    // Step 2: Back to landing via routerLink (push).
+    // Use .first() because the hidden user 99 details page stays in the DOM,
+    // leaving a duplicate #back-to-landing button.
+    await page.locator('#back-to-landing').first().click();
+    await ionPageVisible(page, 'nested-params-landing');
+
+    // Step 3: Navigate to user 42 details
+    await page.locator('#go-to-user-42').click();
+    await expect(page.getByText('Details view user: 42')).toBeVisible();
+
+    // Step 4: Back to landing via routerLink (push)
+    await page.locator('#back-to-landing').first().click();
+    await ionPageVisible(page, 'nested-params-landing');
+
+    // Step 5: Navigate to user 42 details AGAIN -- this triggered the infinite loop
+    await page.locator('#go-to-user-42').click();
+    await expect(page.getByText('Details view user: 42')).toBeVisible();
+    await expect(page.getByText('Layout sees user: 42')).toBeVisible();
+  });
+
+});