@ionic/react-router 8.7.13-dev.11765829391.14bc580c → 8.7.13-dev.11765907916.16a61ecf

package/dist/index.js

@@ -13,10 +13,13 @@ const IonRouteInner = ({ path, element }) => {
  * @see https://reactrouter.com/v6/utils/match-path
  */
 const matchPath = ({ pathname, componentProps }) => {
-    var _a, _b;
     const { path, index } = componentProps, restProps = __rest(componentProps, ["path", "index"]);
-    // Handle index routes - they match when pathname is empty or just "/"
+    // Handle index routes
     if (index && !path) {
+        // Index routes match when there's no additional path after the parent route
+        // For example, in a nested outlet at /routing/*, the index route matches
+        // when the relative path is empty (i.e., we're exactly at /routing)
+        // If pathname is empty or just "/", it should match the index route
         if (pathname === '' || pathname === '/') {
             return {
                 params: {},
@@ -29,25 +32,14 @@ const matchPath = ({ pathname, componentProps }) => {
                 },
             };
         }
+        // Otherwise, index routes don't match when there's additional path
         return null;
     }
-    // Handle empty path routes - they match when pathname is also empty or just "/"
-    if (path === '' || path === undefined) {
-        if (pathname === '' || pathname === '/') {
-            return {
-                params: {},
-                pathname: pathname,
-                pathnameBase: pathname || '/',
-                pattern: {
-                    path: '',
-                    caseSensitive: (_a = restProps.caseSensitive) !== null && _a !== void 0 ? _a : false,
-                    end: (_b = restProps.end) !== null && _b !== void 0 ? _b : true,
-                },
-            };
-        }
+    if (!path) {
         return null;
     }
-    // For relative paths (don't start with '/'), normalize both path and pathname for matching
+    // For relative paths in nested routes (those that don't start with '/'),
+    // use React Router's matcher against a normalized path.
     if (!path.startsWith('/')) {
         const matchOptions = Object.assign({ path: `/${path}` }, restProps);
         if ((matchOptions === null || matchOptions === void 0 ? void 0 : matchOptions.end) === undefined) {
@@ -59,6 +51,7 @@ const matchPath = ({ pathname, componentProps }) => {
             // Adjust the match to remove the leading '/' we added
             return Object.assign(Object.assign({}, match), { pathname: pathname, pathnameBase: match.pathnameBase === '/' ? '' : match.pathnameBase.slice(1), pattern: Object.assign(Object.assign({}, match.pattern), { path: path }) });
         }
+        // No match found
         return null;
     }
     // For absolute paths, use React Router's matcher directly.
@@ -78,16 +71,12 @@ const matchPath = ({ pathname, componentProps }) => {
  */
 const derivePathnameToMatch = (fullPathname, routePath) => {
     var _a;
-    // For absolute or empty routes, use the full pathname as-is
     if (!routePath || routePath === '' || routePath.startsWith('/')) {
         return fullPathname;
     }
     const trimmedPath = fullPathname.startsWith('/') ? fullPathname.slice(1) : fullPathname;
     if (!trimmedPath) {
-        // For root-level relative routes (pathname is "/" and routePath is relative),
-        // return the full pathname so matchPath can normalize both.
-        // This allows routes like <Route path="foo/*" .../> at root level to work correctly.
-        return fullPathname;
+        return '';
     }
     const fullSegments = trimmedPath.split('/').filter(Boolean);
     if (fullSegments.length === 0) {
@@ -163,36 +152,24 @@ const computeCommonPrefix = (paths) => {
     return commonSegments.length > 0 ? '/' + commonSegments.join('/') : '';
 };
 /**
- * Checks if a route path is a "splat-only" route (just `*` or `/*`).
- */
-const isSplatOnlyRoute = (routePath) => {
-    return routePath === '*' || routePath === '/*';
-};
-/**
- * Checks if a route has an embedded wildcard (e.g., "tab1/*" but not "*" or "/*").
- */
-const hasEmbeddedWildcard = (routePath) => {
-    return !!routePath && routePath.includes('*') && !isSplatOnlyRoute(routePath);
-};
-/**
- * Checks if a route with an embedded wildcard matches a pathname.
- */
-const matchesEmbeddedWildcardRoute = (route, pathname) => {
-    const routePath = route.props.path;
-    if (!hasEmbeddedWildcard(routePath)) {
-        return false;
-    }
-    return !!matchPath({ pathname, componentProps: route.props });
-};
-/**
- * Checks if a route is a specific match (not wildcard-only or index).
+ * Checks if a route is a specific match (not wildcard or index).
+ *
+ * @param route The route element to check.
+ * @param remainingPath The remaining path to match against.
+ * @returns True if the route specifically matches the remaining path.
  */
 const isSpecificRouteMatch = (route, remainingPath) => {
     const routePath = route.props.path;
-    if (route.props.index || isSplatOnlyRoute(routePath)) {
+    const isWildcardOnly = routePath === '*' || routePath === '/*';
+    const isIndex = route.props.index;
+    // Skip wildcards and index routes
+    if (isIndex || isWildcardOnly) {
         return false;
     }
-    return !!matchPath({ pathname: remainingPath, componentProps: route.props });
+    return !!matchPath({
+        pathname: remainingPath,
+        componentProps: route.props,
+    });
 };
 /**
  * Analyzes route children to determine their characteristics.
@@ -237,13 +214,11 @@ const computeParentPath = (options) => {
             let firstSpecificMatch = undefined;
             let firstWildcardMatch = undefined;
             let indexMatchAtMount = undefined;
-            // Start at i = 1 (normal case: strip at least one segment for parent path)
             for (let i = 1; i <= segments.length; i++) {
                 const parentPath = '/' + segments.slice(0, i).join('/');
                 const remainingPath = segments.slice(i).join('/');
-                // Check for specific route matches (non-wildcard-only, non-index)
-                // Also check routes with embedded wildcards (e.g., "tab1/*")
-                const hasSpecificMatch = routeChildren.some((route) => isSpecificRouteMatch(route, remainingPath) || matchesEmbeddedWildcardRoute(route, remainingPath));
+                // Check for specific (non-wildcard, non-index) route matches
+                const hasSpecificMatch = routeChildren.some((route) => isSpecificRouteMatch(route, remainingPath));
                 if (hasSpecificMatch && !firstSpecificMatch) {
                     firstSpecificMatch = parentPath;
                     // Found a specific match - this is our answer for non-index routes
@@ -290,16 +265,6 @@ const computeParentPath = (options) => {
                     }
                 }
             }
-            // Fallback: check at root level (i = 0) for embedded wildcard routes.
-            // This handles outlets inside root-level splat routes where routes like
-            // "tab1/*" need to match the full pathname.
-            if (!firstSpecificMatch) {
-                const fullRemainingPath = segments.join('/');
-                const hasRootLevelMatch = routeChildren.some((route) => matchesEmbeddedWildcardRoute(route, fullRemainingPath));
-                if (hasRootLevelMatch) {
-                    firstSpecificMatch = '/';
-                }
-            }
             // Determine the best parent path:
             // 1. Specific match (routes like tabs/*, favorites) - highest priority
             // 2. Wildcard match (route path="*") - catches unmatched segments
@@ -775,36 +740,27 @@ class ReactRouterViewStack extends ViewStacks {
                 const combinedParams = Object.assign(Object.assign({}, accumulatedParentParams), ((_c = routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.params) !== null && _c !== void 0 ? _c : {}));
                 // For relative route paths, we need to compute an absolute pathnameBase
                 // by combining the parent's pathnameBase with the matched portion
+                let absolutePathnameBase = (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathnameBase) || routeInfo.pathname;
                 const routePath = routeElement.props.path;
                 const isRelativePath = routePath && !routePath.startsWith('/');
                 const isIndexRoute = !!routeElement.props.index;
-                const isSplatOnlyRoute = routePath === '*' || routePath === '/*';
-                // Get parent's pathnameBase for relative path resolution
-                const parentPathnameBase = parentMatches.length > 0 ? parentMatches[parentMatches.length - 1].pathnameBase : '/';
-                // Start with the match's pathnameBase, falling back to routeInfo.pathname
-                // BUT: splat-only routes should use parent's base (v7_relativeSplatPath behavior)
-                let absolutePathnameBase;
-                if (isSplatOnlyRoute) {
-                    // Splat routes should NOT contribute their matched portion to pathnameBase
-                    // This aligns with React Router v7's v7_relativeSplatPath behavior
-                    // Without this, relative links inside splat routes get double path segments
-                    absolutePathnameBase = parentPathnameBase;
-                }
-                else if (isRelativePath && (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathnameBase)) {
-                    // For relative paths with a pathnameBase, combine with parent
-                    const relativeBase = routeMatch.pathnameBase.startsWith('/')
-                        ? routeMatch.pathnameBase.slice(1)
-                        : routeMatch.pathnameBase;
-                    absolutePathnameBase =
-                        parentPathnameBase === '/' ? `/${relativeBase}` : `${parentPathnameBase}/${relativeBase}`;
-                }
-                else if (isIndexRoute) {
-                    // Index routes should use the parent's base as their base
-                    absolutePathnameBase = parentPathnameBase;
-                }
-                else {
-                    // Default: use the match's pathnameBase or the current pathname
-                    absolutePathnameBase = (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathnameBase) || routeInfo.pathname;
+                if (isRelativePath || isIndexRoute) {
+                    // Get the parent's pathnameBase to build the absolute path
+                    const parentPathnameBase = parentMatches.length > 0 ? parentMatches[parentMatches.length - 1].pathnameBase : '/';
+                    // For relative paths, the matchPath returns a relative pathnameBase
+                    // We need to make it absolute by prepending the parent's base
+                    if ((routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathnameBase) && isRelativePath) {
+                        // Strip leading slash if present in the relative match
+                        const relativeBase = routeMatch.pathnameBase.startsWith('/')
+                            ? routeMatch.pathnameBase.slice(1)
+                            : routeMatch.pathnameBase;
+                        absolutePathnameBase =
+                            parentPathnameBase === '/' ? `/${relativeBase}` : `${parentPathnameBase}/${relativeBase}`;
+                    }
+                    else if (isIndexRoute) {
+                        // Index routes should use the parent's base as their base
+                        absolutePathnameBase = parentPathnameBase;
+                    }
                 }
                 const contextMatches = [
                     ...parentMatches,
@@ -848,9 +804,7 @@ class ReactRouterViewStack extends ViewStacks {
             let parentPath = undefined;
             try {
                 // Only attempt parent path computation for non-root outlets
-                // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
-                const isRootOutlet = outletId.startsWith('routerOutlet');
-                if (!isRootOutlet) {
+                if (outletId !== 'routerOutlet') {
                     const routeChildren = extractRouteChildren(ionRouterOutlet.props.children);
                     const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
                     if (hasRelativeRoutes || hasIndexRoute) {
@@ -1092,7 +1046,7 @@ class ReactRouterViewStack extends ViewStacks {
          * Matches a view with no path prop (default fallback route) or index route.
          */
         function matchDefaultRoute(v) {
-            var _a, _b, _c;
+            var _a;
             const childProps = v.routeData.childProps;
             const isDefaultRoute = childProps.path === undefined || childProps.path === '';
             const isIndexRoute = !!childProps.index;
@@ -1105,22 +1059,14 @@ class ReactRouterViewStack extends ViewStacks {
                 }
                 return false;
             }
-            // For empty path routes, only match if we're at the same level as when the view was created.
-            // This prevents an empty path view item from being reused for different routes.
             if (isDefaultRoute) {
-                const previousPathnameBase = ((_b = (_a = v.routeData) === null || _a === void 0 ? void 0 : _a.match) === null || _b === void 0 ? void 0 : _b.pathnameBase) || '';
-                const normalizedBase = normalizePathnameForComparison(previousPathnameBase);
-                const normalizedPathname = normalizePathnameForComparison(pathname);
-                if (normalizedPathname !== normalizedBase) {
-                    return false;
-                }
                 match = {
                     params: {},
                     pathname,
                     pathnameBase: pathname === '' ? '/' : pathname,
                     pattern: {
                         path: '',
-                        caseSensitive: (_c = childProps.caseSensitive) !== null && _c !== void 0 ? _c : false,
+                        caseSensitive: (_a = childProps.caseSensitive) !== null && _a !== void 0 ? _a : false,
                         end: true,
                     },
                 };
@@ -1245,30 +1191,24 @@ class StackManager extends React.PureComponent {
         if (this.outletMountPath && !currentPathname.startsWith(this.outletMountPath)) {
             return undefined;
         }
-        // Check if this outlet has route children to analyze
-        if (this.ionRouterOutlet) {
+        // If this is a nested outlet (has an explicit ID like "main"),
+        // we need to figure out what part of the path was already matched
+        if (this.id !== 'routerOutlet' && this.ionRouterOutlet) {
             const routeChildren = extractRouteChildren(this.ionRouterOutlet.props.children);
             const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
-            // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
-            // But even outlets with auto-generated IDs may need parent path computation
-            // if they have relative routes (indicating they're nested outlets)
-            const isRootOutlet = this.id.startsWith('routerOutlet');
-            const needsParentPath = !isRootOutlet || hasRelativeRoutes || hasIndexRoute;
-            if (needsParentPath) {
-                const result = computeParentPath({
-                    currentPathname,
-                    outletMountPath: this.outletMountPath,
-                    routeChildren,
-                    hasRelativeRoutes,
-                    hasIndexRoute,
-                    hasWildcardRoute,
-                });
-                // Update the outlet mount path if it was set
-                if (result.outletMountPath && !this.outletMountPath) {
-                    this.outletMountPath = result.outletMountPath;
-                }
-                return result.parentPath;
+            const result = computeParentPath({
+                currentPathname,
+                outletMountPath: this.outletMountPath,
+                routeChildren,
+                hasRelativeRoutes,
+                hasIndexRoute,
+                hasWildcardRoute,
+            });
+            // Update the outlet mount path if it was set
+            if (result.outletMountPath && !this.outletMountPath) {
+                this.outletMountPath = result.outletMountPath;
             }
+            return result.parentPath;
         }
         return this.outletMountPath;
     }
@@ -1316,39 +1256,12 @@ class StackManager extends React.PureComponent {
      * Determines if the leaving view item should be unmounted after a transition.
      */
     shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem) {
-        var _a, _b, _c, _d;
         if (!leavingViewItem) {
             return false;
         }
         if (routeInfo.routeAction === 'replace') {
-            // For replace actions, decide whether to unmount the leaving view.
-            // The key question is: are these routes in the same navigation context?
-            const enteringRoutePath = (_b = (_a = enteringViewItem === null || enteringViewItem === void 0 ? void 0 : enteringViewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
-            const leavingRoutePath = (_d = (_c = leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.reactElement) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.path;
-            // Never unmount the root path "/" - it's the main entry point for back navigation
-            if (leavingRoutePath === '/' || leavingRoutePath === '') {
-                return false;
-            }
-            if (enteringRoutePath && leavingRoutePath) {
-                // Get parent paths to check if routes share a common parent
-                const getParentPath = (path) => {
-                    const normalized = path.replace(/\/\*$/, ''); // Remove trailing /*
-                    const lastSlash = normalized.lastIndexOf('/');
-                    return lastSlash > 0 ? normalized.substring(0, lastSlash) : '/';
-                };
-                const enteringParent = getParentPath(enteringRoutePath);
-                const leavingParent = getParentPath(leavingRoutePath);
-                // Unmount if:
-                // 1. Routes are siblings (same parent, e.g., /page1 and /page2, or /foo/page1 and /foo/page2)
-                // 2. Entering is a child of leaving (redirect, e.g., /tabs -> /tabs/tab1)
-                const areSiblings = enteringParent === leavingParent && enteringParent !== '/';
-                const isChildRedirect = enteringRoutePath.startsWith(leavingRoutePath) ||
-                    (leavingRoutePath.endsWith('/*') && enteringRoutePath.startsWith(leavingRoutePath.slice(0, -2)));
-                return areSiblings || isChildRedirect;
-            }
-            return false;
+            return true;
         }
-        // For non-replace actions, only unmount for back navigation (not forward push)
         const isForwardPush = routeInfo.routeAction === 'push' && routeInfo.routeDirection === 'forward';
         if (!isForwardPush && routeInfo.routeDirection !== 'none' && enteringViewItem !== leavingViewItem) {
             return true;
@@ -1384,9 +1297,7 @@ class StackManager extends React.PureComponent {
      */
     handleOutOfContextNestedOutlet(parentPath, leavingViewItem) {
         var _a;
-        // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
-        const isRootOutlet = this.id.startsWith('routerOutlet');
-        if (isRootOutlet || parentPath !== undefined || !this.ionRouterOutlet) {
+        if (this.id === 'routerOutlet' || parentPath !== undefined || !this.ionRouterOutlet) {
             return false;
         }
         const routesChildren = (_a = getRoutesChildren(this.ionRouterOutlet.props.children)) !== null && _a !== void 0 ? _a : this.ionRouterOutlet.props.children;
@@ -1411,9 +1322,7 @@ class StackManager extends React.PureComponent {
      * Returns true if the transition should be aborted.
      */
     handleNoMatchingRoute(enteringRoute, enteringViewItem, leavingViewItem) {
-        // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
-        const isRootOutlet = this.id.startsWith('routerOutlet');
-        if (isRootOutlet || enteringRoute || enteringViewItem) {
+        if (this.id === 'routerOutlet' || enteringRoute || enteringViewItem) {
             return false;
         }
         // Hide any visible views in this outlet since it has no matching route
@@ -1429,6 +1338,8 @@ class StackManager extends React.PureComponent {
      */
     handleReadyEnteringView(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem) {
         var _a, _b;
+        // Ensure the entering view is not hidden from previous navigations
+        showIonPageElement(enteringViewItem.ionPageElement);
         // Handle same view item case (e.g., parameterized route changes)
         if (enteringViewItem === leavingViewItem) {
             const routePath = (_b = (_a = enteringViewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
@@ -1452,76 +1363,24 @@ class StackManager extends React.PureComponent {
         if (!leavingViewItem && this.props.routeInfo.prevRouteLastPathname) {
             leavingViewItem = this.context.findViewItemByPathname(this.props.routeInfo.prevRouteLastPathname, this.id);
         }
-        // Ensure the entering view is marked as mounted.
-        // This is critical for views that were previously unmounted (e.g., navigating back to home).
-        // When mount=false, the ViewLifeCycleManager doesn't render the IonPage, so the
-        // ionPageElement reference becomes stale. By setting mount=true, we ensure the view
-        // gets re-rendered and a new IonPage is created.
-        if (!enteringViewItem.mount) {
-            enteringViewItem.mount = true;
-        }
-        // Check visibility state BEFORE showing the entering view.
-        // This must be done before showIonPageElement to get accurate visibility state.
-        const enteringWasVisible = enteringViewItem.ionPageElement && isViewVisible(enteringViewItem.ionPageElement);
-        const leavingIsHidden = leavingViewItem !== undefined && leavingViewItem.ionPageElement && !isViewVisible(leavingViewItem.ionPageElement);
+        // Skip transition if entering view is visible and leaving view is not
+        if (enteringViewItem.ionPageElement &&
+            isViewVisible(enteringViewItem.ionPageElement) &&
+            leavingViewItem !== undefined &&
+            leavingViewItem.ionPageElement &&
+            !isViewVisible(leavingViewItem.ionPageElement)) {
+            return;
+        }
         // Check for duplicate transition
         const currentTransition = {
             enteringId: enteringViewItem.id,
             leavingId: leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.id,
         };
-        const isDuplicateTransition = leavingViewItem &&
+        if (leavingViewItem &&
             this.lastTransition &&
             this.lastTransition.leavingId &&
             this.lastTransition.enteringId === currentTransition.enteringId &&
-            this.lastTransition.leavingId === currentTransition.leavingId;
-        // Skip transition if entering view was ALREADY visible and leaving view is not visible.
-        // This indicates the transition has already been performed (e.g., via swipe gesture).
-        // IMPORTANT: Only skip if both ionPageElements are the same as when the transition was last done.
-        // If the leaving view's ionPageElement changed (e.g., component re-rendered with different IonPage),
-        // we should NOT skip because the DOM state is inconsistent.
-        if (enteringWasVisible && leavingIsHidden && isDuplicateTransition) {
-            // For swipe-to-go-back, the transition animation was handled by the gesture.
-            // We still need to set mount=false so React unmounts the leaving view.
-            // Only do this when skipTransition is set (indicating gesture completion).
-            if (this.skipTransition &&
-                shouldUnmountLeavingViewItem &&
-                leavingViewItem &&
-                enteringViewItem !== leavingViewItem) {
-                leavingViewItem.mount = false;
-                // Call transitionPage with duration 0 to trigger ionViewDidLeave lifecycle
-                // which is needed for ViewLifeCycleManager to remove the view.
-                this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back');
-            }
-            // Clear skipTransition since we're not calling transitionPage which normally clears it
-            this.skipTransition = false;
-            // Must call forceUpdate to trigger re-render after mount state change
-            this.forceUpdate();
-            return;
-        }
-        // Ensure the entering view is not hidden from previous navigations
-        // This must happen AFTER the visibility check above
-        showIonPageElement(enteringViewItem.ionPageElement);
-        // Skip if this is a duplicate transition (but visibility state didn't match above)
-        // OR if skipTransition is set (swipe gesture already handled the animation)
-        if (isDuplicateTransition || this.skipTransition) {
-            // For swipe-to-go-back, we still need to handle unmounting even if visibility
-            // conditions aren't fully met (animation might still be in progress)
-            if (this.skipTransition &&
-                shouldUnmountLeavingViewItem &&
-                leavingViewItem &&
-                enteringViewItem !== leavingViewItem) {
-                leavingViewItem.mount = false;
-                // For swipe-to-go-back, we need to call transitionPage with duration 0 to
-                // trigger the ionViewDidLeave lifecycle event. The ViewLifeCycleManager
-                // uses componentCanBeDestroyed callback to remove the view, which is
-                // only called from ionViewDidLeave. Since the gesture animation already
-                // completed before mount=false was set, we need to re-fire the lifecycle.
-                this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back');
-            }
-            // Clear skipTransition since we're not calling transitionPage which normally clears it
-            this.skipTransition = false;
-            // Must call forceUpdate to trigger re-render after mount state change
-            this.forceUpdate();
+            this.lastTransition.leavingId === currentTransition.leavingId) {
             return;
         }
         this.lastTransition = currentTransition;
@@ -1533,28 +1392,14 @@ class StackManager extends React.PureComponent {
         }
     }
     /**
-     * Handles the delayed unmount of the leaving view item.
-     * For 'replace' actions: handles container route transitions specially.
-     * For back navigation: explicitly unmounts because the ionViewDidLeave lifecycle
-     * fires DURING transitionPage, but mount=false is set AFTER.
-     *
-     * @param routeInfo Current route information
-     * @param enteringViewItem The view being navigated to
-     * @param leavingViewItem The view being navigated from
+     * Handles the delayed unmount of the leaving view item after a replace action.
      */
     handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem) {
         var _a, _b, _c, _d, _e, _f;
-        if (!leavingViewItem.ionPageElement) {
-            return;
-        }
-        // For push/pop actions, do NOT unmount - views are cached for navigation history.
-        // Push: Forward navigation caches views for back navigation
-        // Pop: Back navigation should not unmount the entering view's history
-        // Only 'replace' actions should actually unmount views since they replace history.
-        if (routeInfo.routeAction !== 'replace') {
+        if (routeInfo.routeAction !== 'replace' || !leavingViewItem.ionPageElement) {
             return;
         }
-        // For replace actions, check if we should skip removal for nested outlet redirects
+        // Check if we should skip removal for nested outlet redirects
         const enteringRoutePath = (_b = (_a = enteringViewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
         const leavingRoutePath = (_d = (_c = leavingViewItem.reactElement) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.path;
         const isEnteringContainerRoute = enteringRoutePath && enteringRoutePath.endsWith('/*');
@@ -1570,8 +1415,6 @@ class StackManager extends React.PureComponent {
         const viewToUnmount = leavingViewItem;
         setTimeout(() => {
             this.context.unMountViewItem(viewToUnmount);
-            // Trigger re-render to remove the view from DOM
-            this.forceUpdate();
         }, VIEW_UNMOUNT_DELAY_MS);
     }
     /**
@@ -1616,8 +1459,6 @@ class StackManager extends React.PureComponent {
                 this.transitionPage(routeInfo, latestEnteringView, latestLeavingView !== null && latestLeavingView !== void 0 ? latestLeavingView : undefined);
                 if (shouldUnmountLeavingViewItem && latestLeavingView && latestEnteringView !== latestLeavingView) {
                     latestLeavingView.mount = false;
-                    // Call handleLeavingViewUnmount to ensure the view is properly removed
-                    this.handleLeavingViewUnmount(routeInfo, latestEnteringView, latestLeavingView);
                 }
                 this.forceUpdate();
             }
@@ -1741,12 +1582,7 @@ class StackManager extends React.PureComponent {
             this.context.addViewItem(enteringViewItem);
         }
         // Handle transition based on ion-page element availability
-        // Check if the ionPageElement is still in the document.
-        // If the view was previously unmounted (mount=false), the ViewLifeCycleManager
-        // removes the React component from the tree, which removes the IonPage from the DOM.
-        // The ionPageElement reference becomes stale and we need to wait for a new one.
-        const ionPageIsInDocument = (enteringViewItem === null || enteringViewItem === void 0 ? void 0 : enteringViewItem.ionPageElement) && document.body.contains(enteringViewItem.ionPageElement);
-        if (enteringViewItem && ionPageIsInDocument) {
+        if (enteringViewItem && enteringViewItem.ionPageElement) {
             // Clear waiting state
             if (this.waitingForIonPage) {
                 this.waitingForIonPage = false;
@@ -1757,17 +1593,8 @@ class StackManager extends React.PureComponent {
             }
             this.handleReadyEnteringView(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem);
         }
-        else if (enteringViewItem && !ionPageIsInDocument) {
+        else if (enteringViewItem && !enteringViewItem.ionPageElement) {
             // Wait for ion-page to mount
-            // This handles both: no ionPageElement, or stale ionPageElement (not in document)
-            // Clear stale reference if the element is no longer in the document
-            if (enteringViewItem.ionPageElement && !document.body.contains(enteringViewItem.ionPageElement)) {
-                enteringViewItem.ionPageElement = undefined;
-            }
-            // Ensure the view is marked as mounted so ViewLifeCycleManager renders the IonPage
-            if (!enteringViewItem.mount) {
-                enteringViewItem.mount = true;
-            }
             this.handleWaitingForIonPage(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem);
             return;
         }
@@ -1799,19 +1626,6 @@ class StackManager extends React.PureComponent {
         const foundView = this.context.findViewItemByRouteInfo(routeInfo, this.id);
         if (foundView) {
             const oldPageElement = foundView.ionPageElement;
-            /**
-             * FIX for issue #28878: Reject orphaned IonPage registrations.
-             *
-             * When a component conditionally renders different IonPages (e.g., list vs empty state)
-             * using React keys, and state changes simultaneously with navigation, the new IonPage
-             * tries to register for a route we're navigating away from. This creates a stale view.
-             *
-             * Only reject if both pageIds exist and differ, to allow nested outlet registrations.
-             */
-            if (this.shouldRejectOrphanedPage(page, oldPageElement, routeInfo)) {
-                this.hideAndRemoveOrphanedPage(page);
-                return;
-            }
             foundView.ionPageElement = page;
             foundView.ionRoute = true;
             /**
@@ -1825,35 +1639,6 @@ class StackManager extends React.PureComponent {
         }
         this.handlePageTransition(routeInfo);
     }
-    /**
-     * Determines if a new IonPage registration should be rejected as orphaned.
-     * This happens when a component re-renders with a different IonPage while navigating away.
-     */
-    shouldRejectOrphanedPage(newPage, oldPageElement, routeInfo) {
-        if (!oldPageElement || oldPageElement === newPage) {
-            return false;
-        }
-        const newPageId = newPage.getAttribute('data-pageid');
-        const oldPageId = oldPageElement.getAttribute('data-pageid');
-        // Only reject if both pageIds exist and are different
-        if (!newPageId || !oldPageId || newPageId === oldPageId) {
-            return false;
-        }
-        // Reject only if we're navigating away from this route
-        return this.props.routeInfo.pathname !== routeInfo.pathname;
-    }
-    /**
-     * Hides an orphaned IonPage and schedules its removal from the DOM.
-     */
-    hideAndRemoveOrphanedPage(page) {
-        page.classList.add('ion-page-hidden');
-        page.setAttribute('aria-hidden', 'true');
-        setTimeout(() => {
-            if (page.parentElement) {
-                page.remove();
-            }
-        }, VIEW_UNMOUNT_DELAY_MS);
-    }
     /**
      * Configures the router outlet for the swipe-to-go-back gesture.
      *
@@ -1869,23 +1654,11 @@ class StackManager extends React.PureComponent {
             }
             const { routeInfo } = this.props;
             const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
-            // First try to find the view in the current outlet
-            let enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
-            // If not found in current outlet, search all outlets (for cross-outlet swipe back)
-            if (!enteringViewItem) {
-                enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, undefined, false);
-            }
-            // Check if the ionPageElement is still in the document.
-            // A view might have mount=false but still have its ionPageElement in the DOM
-            // (due to timing differences in unmounting).
-            const ionPageInDocument = Boolean((enteringViewItem === null || enteringViewItem === void 0 ? void 0 : enteringViewItem.ionPageElement) && document.body.contains(enteringViewItem.ionPageElement));
+            const enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
             const canStartSwipe = !!enteringViewItem &&
-                // Check if we can swipe to this view. Either:
-                // 1. The view is mounted (mount=true), OR
-                // 2. The view's ionPageElement is still in the document
-                // The second case handles views that have been marked for unmount but haven't
-                // actually been removed from the DOM yet.
-                (enteringViewItem.mount || ionPageInDocument) &&
+                // The root url '/' is treated as the first view item (but is never mounted),
+                // so we do not want to swipe back to the root url.
+                enteringViewItem.mount &&
                 // When on the first page it is possible for findViewItemByRouteInfo to
                 // return the exact same view you are currently on.
                 // Make sure that we are not swiping back to the same instances of a view.
@@ -1895,18 +1668,8 @@ class StackManager extends React.PureComponent {
         const onStart = async () => {
             const { routeInfo } = this.props;
             const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
-            // First try to find the view in the current outlet, then search all outlets
-            let enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
-            if (!enteringViewItem) {
-                enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, undefined, false);
-            }
+            const enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
             const leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id, false);
-            // Ensure the entering view is mounted so React keeps rendering it during the gesture.
-            // This is important when the view was previously marked for unmount but its
-            // ionPageElement is still in the DOM.
-            if (enteringViewItem && !enteringViewItem.mount) {
-                enteringViewItem.mount = true;
-            }
             // When the gesture starts, kick off a transition controlled via swipe gesture
             if (enteringViewItem && leavingViewItem) {
                 await this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back', true);
@@ -1923,11 +1686,7 @@ class StackManager extends React.PureComponent {
                 // Swipe gesture was aborted - re-hide the page that was going to enter
                 const { routeInfo } = this.props;
                 const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
-                // First try to find the view in the current outlet, then search all outlets
-                let enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
-                if (!enteringViewItem) {
-                    enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, undefined, false);
-                }
+                const enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
                 const leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id, false);
                 // Don't hide if entering and leaving are the same (parameterized route edge case)
                 if (enteringViewItem !== leavingViewItem && (enteringViewItem === null || enteringViewItem === void 0 ? void 0 : enteringViewItem.ionPageElement) !== undefined) {
@@ -2110,59 +1869,27 @@ function findRouteByRouteInfo(node, routeInfo, parentPath) {
     });
     // For nested routes in React Router 6, we need to extract the relative path
     // that this outlet should be responsible for matching
-    const originalPathname = routeInfo.pathname;
-    let relativePathnameToMatch = routeInfo.pathname;
+    let pathnameToMatch = routeInfo.pathname;
     // Check if we have relative routes (routes that don't start with '/')
     const hasRelativeRoutes = sortedRoutes.some((r) => r.props.path && !r.props.path.startsWith('/'));
     const hasIndexRoute = sortedRoutes.some((r) => r.props.index);
     // SIMPLIFIED: Trust React Router 6's matching more, compute relative path when parent is known
     if ((hasRelativeRoutes || hasIndexRoute) && parentPath) {
         const parentPrefix = parentPath.replace('/*', '');
-        // Normalize both paths to start with '/' for consistent comparison
-        const normalizedParent = stripTrailingSlash(parentPrefix.startsWith('/') ? parentPrefix : `/${parentPrefix}`);
+        const normalizedParent = stripTrailingSlash(parentPrefix);
         const normalizedPathname = stripTrailingSlash(routeInfo.pathname);
         // Only compute relative path if pathname is within parent scope
         if (normalizedPathname.startsWith(normalizedParent + '/') || normalizedPathname === normalizedParent) {
             const pathSegments = routeInfo.pathname.split('/').filter(Boolean);
             const parentSegments = normalizedParent.split('/').filter(Boolean);
             const relativeSegments = pathSegments.slice(parentSegments.length);
-            relativePathnameToMatch = relativeSegments.join('/'); // Empty string is valid for index routes
+            pathnameToMatch = relativeSegments.join('/'); // Empty string is valid for index routes
         }
     }
     // Find the first matching route
     for (const child of sortedRoutes) {
-        const childPath = child.props.path;
-        const isAbsoluteRoute = childPath && childPath.startsWith('/');
-        // Determine which pathname to match against:
-        // - For absolute routes: use the original full pathname
-        // - For relative routes with a parent: use the computed relative pathname
-        // - For relative routes at root level (no parent): use the original pathname
-        //   (matchPath will handle the relative-to-absolute normalization)
-        const pathnameToMatch = isAbsoluteRoute ? originalPathname : relativePathnameToMatch;
-        // Determine the path portion to match:
-        // - For absolute routes: use derivePathnameToMatch
-        // - For relative routes at root level (no parent): use original pathname
-        //   directly since matchPath normalizes both path and pathname
-        // - For relative routes with parent: use derivePathnameToMatch for wildcards,
-        //   or the computed relative pathname for non-wildcards
-        let pathForMatch;
-        if (isAbsoluteRoute) {
-            pathForMatch = derivePathnameToMatch(pathnameToMatch, childPath);
-        }
-        else if (!parentPath && childPath) {
-            // Root-level relative route: use the full pathname and let matchPath
-            // handle the normalization (it adds '/' to both path and pathname)
-            pathForMatch = originalPathname;
-        }
-        else if (childPath && childPath.includes('*')) {
-            // Relative wildcard route with parent path: use derivePathnameToMatch
-            pathForMatch = derivePathnameToMatch(pathnameToMatch, childPath);
-        }
-        else {
-            pathForMatch = pathnameToMatch;
-        }
         const match = matchPath({
-            pathname: pathForMatch,
+            pathname: pathnameToMatch,
             componentProps: child.props,
         });
         if (match) {