@ionic/react-router 8.7.13-dev.11765921002.107104c2 → 8.7.13-dev.11766069240.1ab3dde2

package/dist/index.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { Route, matchPath as matchPath$1, Routes, Navigate, UNSAFE_RouteContext, useLocation, useNavigate, BrowserRouter, useNavigationType, HashRouter } from 'react-router-dom';
-import { ViewStacks, IonRoute, ViewLifeCycleManager, generateId, StackContext, RouteManagerContext, getConfig, LocationHistory, NavManager } from '@ionic/react';
+import { ViewStacks, generateId, IonRoute, ViewLifeCycleManager, StackContext, RouteManagerContext, getConfig, LocationHistory, NavManager } from '@ionic/react';
 import { MemoryRouter, useLocation as useLocation$1, useNavigationType as useNavigationType$1 } from 'react-router';
 
 const IonRouteInner = ({ path, element }) => {
@@ -212,6 +212,77 @@ const analyzeRouteChildren = (routeChildren) => {
     });
     return { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute, routeChildren };
 };
+/**
+ * Checks if any route matches as a specific (non-wildcard, non-index) route.
+ */
+const findSpecificMatch = (routeChildren, remainingPath) => {
+    return routeChildren.some((route) => isSpecificRouteMatch(route, remainingPath) || matchesEmbeddedWildcardRoute(route, remainingPath));
+};
+/**
+ * Checks if any specific route could plausibly match the remaining path.
+ * Used to determine if we should fall back to a wildcard match.
+ */
+const couldSpecificRouteMatch = (routeChildren, remainingPath) => {
+    const remainingFirstSegment = remainingPath.split('/')[0];
+    return routeChildren.some((route) => {
+        const routePath = route.props.path;
+        if (!routePath || routePath === '*' || routePath === '/*')
+            return false;
+        if (route.props.index)
+            return false;
+        const routeFirstSegment = routePath.split('/')[0].replace(/[*:]/g, '');
+        if (!routeFirstSegment)
+            return false;
+        // Check for prefix overlap (either direction)
+        return (routeFirstSegment.startsWith(remainingFirstSegment.slice(0, 3)) ||
+            remainingFirstSegment.startsWith(routeFirstSegment.slice(0, 3)));
+    });
+};
+/**
+ * Checks for index route match when remaining path is empty.
+ * Index routes only match at the outlet's mount path level.
+ */
+const checkIndexMatch = (parentPath, remainingPath, hasIndexRoute, outletMountPath) => {
+    if ((remainingPath === '' || remainingPath === '/') && hasIndexRoute) {
+        if (outletMountPath) {
+            // Index should only match at the existing mount path
+            return parentPath === outletMountPath ? parentPath : undefined;
+        }
+        // No mount path yet - this would establish it
+        return parentPath;
+    }
+    return undefined;
+};
+/**
+ * Determines the best parent path from the available matches.
+ * Priority: specific > wildcard > index
+ */
+const selectBestMatch = (specificMatch, wildcardMatch, indexMatch) => {
+    var _a;
+    return (_a = specificMatch !== null && specificMatch !== void 0 ? specificMatch : wildcardMatch) !== null && _a !== void 0 ? _a : indexMatch;
+};
+/**
+ * Handles outlets with only absolute routes by computing their common prefix.
+ */
+const computeAbsoluteRoutesParentPath = (routeChildren, currentPathname, outletMountPath) => {
+    const absolutePathRoutes = routeChildren.filter((route) => {
+        const path = route.props.path;
+        return path && path.startsWith('/');
+    });
+    if (absolutePathRoutes.length === 0) {
+        return undefined;
+    }
+    const absolutePaths = absolutePathRoutes.map((r) => r.props.path);
+    const commonPrefix = computeCommonPrefix(absolutePaths);
+    if (!commonPrefix || commonPrefix === '/') {
+        return undefined;
+    }
+    const newOutletMountPath = outletMountPath || commonPrefix;
+    if (!currentPathname.startsWith(commonPrefix)) {
+        return { parentPath: undefined, outletMountPath: newOutletMountPath };
+    }
+    return { parentPath: commonPrefix, outletMountPath: newOutletMountPath };
+};
 /**
  * Computes the parent path for a nested outlet based on the current pathname
  * and the outlet's route configuration.
@@ -224,129 +295,59 @@ const analyzeRouteChildren = (routeChildren) => {
  */
 const computeParentPath = (options) => {
     const { currentPathname, outletMountPath, routeChildren, hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = options;
-    // If this outlet previously established a mount path and the current
-    // pathname is outside of that scope, do not attempt to re-compute a new
-    // parent path.
+    // If pathname is outside the established mount path scope, skip computation
     if (outletMountPath && !currentPathname.startsWith(outletMountPath)) {
         return { parentPath: undefined, outletMountPath };
     }
     if ((hasRelativeRoutes || hasIndexRoute) && currentPathname.includes('/')) {
         const segments = currentPathname.split('/').filter(Boolean);
         if (segments.length >= 1) {
-            // Find matches at each level, keeping track of the FIRST (shortest) match
-            let firstSpecificMatch = undefined;
-            let firstWildcardMatch = undefined;
-            let indexMatchAtMount = undefined;
-            // Start at i = 1 (normal case: strip at least one segment for parent path)
+            let firstSpecificMatch;
+            let firstWildcardMatch;
+            let indexMatchAtMount;
+            // Iterate through path segments to find the shortest matching 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));
-                if (hasSpecificMatch && !firstSpecificMatch) {
+                // Check for specific route match (highest priority)
+                if (!firstSpecificMatch && findSpecificMatch(routeChildren, remainingPath)) {
                     firstSpecificMatch = parentPath;
-                    // Found a specific match - this is our answer for non-index routes
                     break;
                 }
-                // Check if wildcard would match this remaining path
-                // Only if remaining is non-empty (wildcard needs something to match)
-                if (remainingPath !== '' && remainingPath !== '/' && hasWildcardRoute && !firstWildcardMatch) {
-                    // Check if any specific route could plausibly match this remaining path
-                    const remainingFirstSegment = remainingPath.split('/')[0];
-                    const couldAnyRouteMatch = routeChildren.some((route) => {
-                        const routePath = route.props.path;
-                        if (!routePath || routePath === '*' || routePath === '/*')
-                            return false;
-                        if (route.props.index)
-                            return false;
-                        const routeFirstSegment = routePath.split('/')[0].replace(/[*:]/g, '');
-                        if (!routeFirstSegment)
-                            return false;
-                        // Check for prefix overlap (either direction)
-                        return (routeFirstSegment.startsWith(remainingFirstSegment.slice(0, 3)) ||
-                            remainingFirstSegment.startsWith(routeFirstSegment.slice(0, 3)));
-                    });
-                    // Only save wildcard match if no specific route could match
-                    if (!couldAnyRouteMatch) {
+                // Check for wildcard match (only if remaining path is non-empty)
+                const hasNonEmptyRemaining = remainingPath !== '' && remainingPath !== '/';
+                if (!firstWildcardMatch && hasNonEmptyRemaining && hasWildcardRoute) {
+                    if (!couldSpecificRouteMatch(routeChildren, remainingPath)) {
                         firstWildcardMatch = parentPath;
-                        // Continue looking - might find a specific match at a longer path
                     }
                 }
-                // Check for index route match when remaining path is empty
-                // BUT only at the outlet's mount path level
-                if ((remainingPath === '' || remainingPath === '/') && hasIndexRoute) {
-                    // Index route matches when current path exactly matches the mount path
-                    // If we already have an outletMountPath, index should only match there
-                    if (outletMountPath) {
-                        if (parentPath === outletMountPath) {
-                            indexMatchAtMount = parentPath;
-                        }
-                    }
-                    else {
-                        // No mount path set yet - index would establish this as mount path
-                        // But only if we haven't found a better match
-                        indexMatchAtMount = parentPath;
-                    }
+                // Check for index route match
+                const indexMatch = checkIndexMatch(parentPath, remainingPath, hasIndexRoute, outletMountPath);
+                if (indexMatch) {
+                    indexMatchAtMount = indexMatch;
                 }
             }
-            // 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.
+            // Fallback: check root level for embedded wildcard routes (e.g., "tab1/*")
             if (!firstSpecificMatch) {
                 const fullRemainingPath = segments.join('/');
-                const hasRootLevelMatch = routeChildren.some((route) => matchesEmbeddedWildcardRoute(route, fullRemainingPath));
-                if (hasRootLevelMatch) {
+                if (routeChildren.some((route) => matchesEmbeddedWildcardRoute(route, fullRemainingPath))) {
                     firstSpecificMatch = '/';
                 }
             }
-            // Determine the best parent path:
-            // 1. Specific match (routes like tabs/*, favorites) - highest priority
-            // 2. Wildcard match (route path="*") - catches unmatched segments
-            // 3. Index match - only valid at the outlet's mount point, not deeper
-            let bestPath = undefined;
-            if (firstSpecificMatch) {
-                bestPath = firstSpecificMatch;
-            }
-            else if (firstWildcardMatch) {
-                bestPath = firstWildcardMatch;
-            }
-            else if (indexMatchAtMount) {
-                // Only use index match if no specific or wildcard matched
-                // This handles the case where pathname exactly matches the mount path
-                bestPath = indexMatchAtMount;
-            }
-            // Store the mount path when we first successfully match a route
-            let newOutletMountPath = outletMountPath;
-            if (!outletMountPath && bestPath) {
-                newOutletMountPath = bestPath;
-            }
-            // If we have a mount path, verify the current pathname is within scope
+            const bestPath = selectBestMatch(firstSpecificMatch, firstWildcardMatch, indexMatchAtMount);
+            // Establish mount path on first successful match
+            const newOutletMountPath = outletMountPath || bestPath;
             if (newOutletMountPath && !currentPathname.startsWith(newOutletMountPath)) {
                 return { parentPath: undefined, outletMountPath: newOutletMountPath };
             }
             return { parentPath: bestPath, outletMountPath: newOutletMountPath };
         }
     }
-    // Handle outlets with ONLY absolute routes (no relative routes or index routes)
-    // Compute the common prefix of all absolute routes to determine the outlet's scope
+    // Handle outlets with only absolute routes
     if (!hasRelativeRoutes && !hasIndexRoute) {
-        const absolutePathRoutes = routeChildren.filter((route) => {
-            const path = route.props.path;
-            return path && path.startsWith('/');
-        });
-        if (absolutePathRoutes.length > 0) {
-            const absolutePaths = absolutePathRoutes.map((r) => r.props.path);
-            const commonPrefix = computeCommonPrefix(absolutePaths);
-            if (commonPrefix && commonPrefix !== '/') {
-                // Set the mount path based on common prefix of absolute routes
-                const newOutletMountPath = outletMountPath || commonPrefix;
-                // Check if current pathname is within scope
-                if (!currentPathname.startsWith(commonPrefix)) {
-                    return { parentPath: undefined, outletMountPath: newOutletMountPath };
-                }
-                return { parentPath: commonPrefix, outletMountPath: newOutletMountPath };
-            }
+        const result = computeAbsoluteRoutesParentPath(routeChildren, currentPathname, outletMountPath);
+        if (result) {
+            return result;
         }
     }
     return { parentPath: outletMountPath, outletMountPath };
@@ -472,6 +473,72 @@ const NAVIGATE_REDIRECT_DELAY_MS = 100;
  * This double-checks that the view is truly not needed before removal.
  */
 const VIEW_CLEANUP_DELAY_MS = 200;
+/**
+ * Computes the absolute pathnameBase for a route element based on its type.
+ * Handles relative paths, index routes, and splat routes differently.
+ */
+const computeAbsolutePathnameBase = (routeElement, routeMatch, parentPathnameBase, routeInfoPathname) => {
+    const routePath = routeElement.props.path;
+    const isRelativePath = routePath && !routePath.startsWith('/');
+    const isIndexRoute = !!routeElement.props.index;
+    const isSplatOnlyRoute = routePath === '*' || routePath === '/*';
+    if (isSplatOnlyRoute) {
+        // Splat routes should NOT contribute their matched portion to pathnameBase
+        // This aligns with React Router v7's v7_relativeSplatPath behavior
+        return parentPathnameBase;
+    }
+    if (isRelativePath && (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathnameBase)) {
+        const relativeBase = routeMatch.pathnameBase.startsWith('/')
+            ? routeMatch.pathnameBase.slice(1)
+            : routeMatch.pathnameBase;
+        return parentPathnameBase === '/' ? `/${relativeBase}` : `${parentPathnameBase}/${relativeBase}`;
+    }
+    if (isIndexRoute) {
+        return parentPathnameBase;
+    }
+    return (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathnameBase) || routeInfoPathname;
+};
+/**
+ * Gets fallback params from view items in other outlets when parent context is empty.
+ * This handles cases where React context propagation doesn't work as expected.
+ */
+const getFallbackParamsFromViewItems = (allViewItems, currentOutletId, currentPathname) => {
+    var _a;
+    const params = {};
+    for (const otherViewItem of allViewItems) {
+        if (otherViewItem.outletId === currentOutletId)
+            continue;
+        const otherMatch = (_a = otherViewItem.routeData) === null || _a === void 0 ? void 0 : _a.match;
+        if ((otherMatch === null || otherMatch === void 0 ? void 0 : otherMatch.params) && Object.keys(otherMatch.params).length > 0) {
+            const matchedPathname = otherMatch.pathnameBase || otherMatch.pathname;
+            if (matchedPathname && currentPathname.startsWith(matchedPathname)) {
+                Object.assign(params, otherMatch.params);
+            }
+        }
+    }
+    return params;
+};
+/**
+ * Builds the matches array for RouteContext.
+ */
+const buildContextMatches = (parentMatches, combinedParams, routeMatch, routeInfoPathname, absolutePathnameBase, viewItem, routeElement, componentElement) => {
+    return [
+        ...parentMatches,
+        {
+            params: combinedParams,
+            pathname: (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathname) || routeInfoPathname,
+            pathnameBase: absolutePathnameBase,
+            route: {
+                id: viewItem.id,
+                path: routeElement.props.path,
+                element: componentElement,
+                index: !!routeElement.props.index,
+                caseSensitive: routeElement.props.caseSensitive,
+                hasErrorBoundary: false,
+            },
+        },
+    ];
+};
 const createDefaultMatch = (fullPathname, routeProps) => {
     var _a, _b;
     const isIndexRoute = !!routeProps.index;
@@ -529,7 +596,6 @@ const resolveIndexRouteMatch = (viewItem, pathname, parentPath) => {
 class ReactRouterViewStack extends ViewStacks {
     constructor() {
         super();
-        this.viewItemCounter = 0;
         /**
          * Creates a new view item for the given outlet and react route element.
          * Associates route props with the matched route path for further lookups.
@@ -609,8 +675,7 @@ class ReactRouterViewStack extends ViewStacks {
                 };
                 return existingViewItem;
             }
-            this.viewItemCounter++;
-            const id = `${outletId}-${this.viewItemCounter}`;
+            const id = `${outletId}-${generateId(outletId)}`;
             const viewItem = {
                 id,
                 outletId,
@@ -747,87 +812,19 @@ class ReactRouterViewStack extends ViewStacks {
             }
             const routeMatch = shouldSkipForDifferentParam ? (_g = viewItem.routeData) === null || _g === void 0 ? void 0 : _g.match : match || ((_h = viewItem.routeData) === null || _h === void 0 ? void 0 : _h.match);
             return (React.createElement(UNSAFE_RouteContext.Consumer, { key: `view-context-${viewItem.id}` }, (parentContext) => {
-                var _a, _b, _c;
-                const parentMatches = (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.matches) !== null && _a !== void 0 ? _a : [];
-                let accumulatedParentParams = parentMatches.reduce((acc, match) => {
-                    return Object.assign(Object.assign({}, acc), match.params);
-                }, {});
-                // If parentMatches is empty, try to extract params from view items in other outlets.
-                // This handles cases where React context propagation doesn't work as expected
-                // for nested router outlets.
+                var _a, _b;
+                const parentMatches = ((_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.matches) !== null && _a !== void 0 ? _a : []);
+                // Accumulate params from parent matches, with fallback to other outlets
+                let accumulatedParentParams = parentMatches.reduce((acc, m) => (Object.assign(Object.assign({}, acc), m.params)), {});
                 if (parentMatches.length === 0 && Object.keys(accumulatedParentParams).length === 0) {
-                    const allViewItems = this.getAllViewItems();
-                    for (const otherViewItem of allViewItems) {
-                        // Skip view items from the same outlet
-                        if (otherViewItem.outletId === viewItem.outletId)
-                            continue;
-                        // Check if this view item's route could match the current pathname
-                        const otherMatch = (_b = otherViewItem.routeData) === null || _b === void 0 ? void 0 : _b.match;
-                        if (otherMatch && otherMatch.params && Object.keys(otherMatch.params).length > 0) {
-                            // Check if the current pathname starts with this view item's matched pathname
-                            const matchedPathname = otherMatch.pathnameBase || otherMatch.pathname;
-                            if (matchedPathname && routeInfo.pathname.startsWith(matchedPathname)) {
-                                accumulatedParentParams = Object.assign(Object.assign({}, accumulatedParentParams), otherMatch.params);
-                            }
-                        }
-                    }
+                    accumulatedParentParams = getFallbackParamsFromViewItems(this.getAllViewItems(), viewItem.outletId, routeInfo.pathname);
                 }
-                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
-                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 combinedParams = Object.assign(Object.assign({}, accumulatedParentParams), ((_b = routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.params) !== null && _b !== void 0 ? _b : {}));
                 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;
-                }
-                const contextMatches = [
-                    ...parentMatches,
-                    {
-                        params: combinedParams,
-                        pathname: (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathname) || routeInfo.pathname,
-                        pathnameBase: absolutePathnameBase,
-                        route: {
-                            id: viewItem.id,
-                            path: routeElement.props.path,
-                            element: componentElement,
-                            index: !!routeElement.props.index,
-                            caseSensitive: routeElement.props.caseSensitive,
-                            hasErrorBoundary: false,
-                        },
-                    },
-                ];
+                const absolutePathnameBase = computeAbsolutePathnameBase(routeElement, routeMatch, parentPathnameBase, routeInfo.pathname);
+                const contextMatches = buildContextMatches(parentMatches, combinedParams, routeMatch, routeInfo.pathname, absolutePathnameBase, viewItem, routeElement, componentElement);
                 const routeContextValue = parentContext
-                    ? Object.assign(Object.assign({}, parentContext), { matches: contextMatches }) : {
-                    outlet: null,
-                    matches: contextMatches,
-                    isDataRoute: false,
-                };
+                    ? Object.assign(Object.assign({}, parentContext), { matches: contextMatches }) : { outlet: null, matches: contextMatches, isDataRoute: false };
                 return (React.createElement(ViewLifeCycleManager, { key: `view-${viewItem.id}`, mount: viewItem.mount, removeView: () => this.remove(viewItem) },
                     React.createElement(UNSAFE_RouteContext.Provider, { value: routeContextValue }, componentElement)));
             }));
@@ -1529,6 +1526,10 @@ class StackManager extends React.PureComponent {
             leavingViewItem.mount = false;
             this.handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem);
         }
+        // Clean up any orphaned sibling views that are no longer reachable
+        // This is important for replace actions (like redirects) where sibling views
+        // that were pushed earlier become unreachable
+        this.cleanupOrphanedSiblingViews(routeInfo, enteringViewItem, leavingViewItem);
     }
     /**
      * Handles the delayed unmount of the leaving view item.
@@ -1561,7 +1562,8 @@ class StackManager extends React.PureComponent {
             leavingRoutePath !== '*' &&
             !leavingRoutePath.endsWith('/*') &&
             !((_f = (_e = leavingViewItem.reactElement) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.index);
-        // Skip removal only for container-to-container transitions
+        // Skip removal for container-to-container transitions (e.g., /tabs/* → /settings/*).
+        // These routes manage their own nested outlets; unmounting would disrupt child views.
         if (isEnteringContainerRoute && !isLeavingSpecificRoute) {
             return;
         }
@@ -1572,6 +1574,74 @@ class StackManager extends React.PureComponent {
             this.forceUpdate();
         }, VIEW_UNMOUNT_DELAY_MS);
     }
+    /**
+     * Cleans up orphaned sibling views after a replace action.
+     * When navigating via replace (e.g., through a redirect), sibling views that were
+     * pushed earlier may become orphaned (unreachable via back navigation).
+     * This method identifies and unmounts such views.
+     */
+    cleanupOrphanedSiblingViews(routeInfo, enteringViewItem, leavingViewItem) {
+        var _a, _b, _c, _d;
+        // Only cleanup for replace actions
+        if (routeInfo.routeAction !== 'replace') {
+            return;
+        }
+        const enteringRoutePath = (_b = (_a = enteringViewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
+        if (!enteringRoutePath) {
+            return;
+        }
+        // Get all views in this outlet
+        const allViewsInOutlet = this.context.getViewItemsForOutlet ? this.context.getViewItemsForOutlet(this.id) : [];
+        // Check if routes are "siblings" - direct children of the same outlet at the same level
+        const areSiblingRoutes = (path1, path2) => {
+            // Both are relative routes (don't start with /)
+            const path1IsRelative = !path1.startsWith('/');
+            const path2IsRelative = !path2.startsWith('/');
+            // For relative routes at the outlet root level, they're siblings
+            if (path1IsRelative && path2IsRelative) {
+                // Check if they're at the same depth (no nested slashes, except for wildcards)
+                const path1Depth = path1.replace(/\/\*$/, '').split('/').filter(Boolean).length;
+                const path2Depth = path2.replace(/\/\*$/, '').split('/').filter(Boolean).length;
+                return path1Depth === path2Depth && path1Depth <= 1;
+            }
+            // For absolute routes, check if they share the same parent
+            const getParent = (path) => {
+                const normalized = path.replace(/\/\*$/, '');
+                const lastSlash = normalized.lastIndexOf('/');
+                return lastSlash > 0 ? normalized.substring(0, lastSlash) : '/';
+            };
+            return getParent(path1) === getParent(path2);
+        };
+        for (const viewItem of allViewsInOutlet) {
+            const viewRoutePath = (_d = (_c = viewItem.reactElement) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.path;
+            // Skip views that shouldn't be cleaned up:
+            // - The entering view itself
+            // - The immediate leaving view (handled separately by handleLeavingViewUnmount)
+            // - Already unmounted views
+            // - Views without a route path
+            // - Container routes (ending in /*) when entering is also a container route
+            const shouldSkip = viewItem.id === enteringViewItem.id ||
+                (leavingViewItem && viewItem.id === leavingViewItem.id) ||
+                !viewItem.mount ||
+                !viewRoutePath ||
+                (viewRoutePath.endsWith('/*') && enteringRoutePath.endsWith('/*'));
+            if (shouldSkip) {
+                continue;
+            }
+            // Check if this is a sibling route that should be cleaned up
+            if (areSiblingRoutes(enteringRoutePath, viewRoutePath)) {
+                // Hide and unmount the orphaned view
+                hideIonPageElement(viewItem.ionPageElement);
+                viewItem.mount = false;
+                // Schedule removal
+                const viewToRemove = viewItem;
+                setTimeout(() => {
+                    this.context.unMountViewItem(viewToRemove);
+                    this.forceUpdate();
+                }, VIEW_UNMOUNT_DELAY_MS);
+            }
+        }
+    }
     /**
      * Handles the case when entering view has no ion-page element yet (waiting for render).
      */
@@ -2269,6 +2339,8 @@ const IonRouter = ({ children, registerHistoryListener }) => {
         registerHistoryListener(handleHistoryChange);
         didMountRef.current = true;
     }, []);
+    // Sync route params extracted by React Router's path matching back into routeInfo.
+    // The view stack's match may contain params (e.g., :id) not present in the initial routeInfo.
     useEffect(() => {
         var _a;
         const activeView = viewStack.current.findViewItemByRouteInfo(routeInfo, undefined, true);