@ionic/react-router 8.8.1-dev.11773168858.1f9c0eb8 → 8.8.1-dev.11773432149.19826d0c

package/dist/index.js

@@ -1,11 +1,11 @@
 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, generateId, IonRoute, ViewLifeCycleManager, StackContext, RouteManagerContext, getConfig, LocationHistory, NavManager } from '@ionic/react';
+import { Route, matchPath as matchPath$1, Routes, Navigate, UNSAFE_RouteContext, matchRoutes, useLocation, useNavigate, BrowserRouter, useNavigationType, HashRouter } from 'react-router-dom';
+import { IonRoute, ViewStacks, generateId, 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 }) => {
-    return React.createElement(Route, { path: path, element: element });
+const IonRouteInner = ({ path, index, caseSensitive, element }) => {
+    return React.createElement(Route, { path: path, index: index, caseSensitive: caseSensitive, element: element });
 };
 
 /**
@@ -57,7 +57,7 @@ const matchPath = ({ pathname, componentProps }) => {
         const match = matchPath$1(matchOptions, normalizedPathname);
         if (match) {
             // 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 }) });
+            return Object.assign(Object.assign({}, match), { pathname: pathname, pathnameBase: match.pathnameBase === '/' ? '/' : match.pathnameBase.slice(1), pattern: Object.assign(Object.assign({}, match.pattern), { path: path }) });
         }
         return null;
     }
@@ -162,6 +162,16 @@ const computeCommonPrefix = (paths) => {
     }
     return commonSegments.length > 0 ? '/' + commonSegments.join('/') : '';
 };
+/**
+ * Checks if a pathname falls within the scope of a mount path using
+ * segment-aware comparison. Prevents false positives like "/tabs-secondary"
+ * matching mount path "/tabs".
+ */
+const isPathnameInScope = (pathname, mountPath) => {
+    if (mountPath === '/')
+        return true;
+    return pathname === mountPath || pathname.startsWith(mountPath + '/');
+};
 /**
  * Checks if a route path is a "splat-only" route (just `*` or `/*`).
  */
@@ -218,9 +228,20 @@ const analyzeRouteChildren = (routeChildren) => {
 const findSpecificMatch = (routeChildren, remainingPath) => {
     return routeChildren.some((route) => isSpecificRouteMatch(route, remainingPath) || matchesEmbeddedWildcardRoute(route, remainingPath));
 };
+/**
+ * Returns the first route that matches as a specific (non-wildcard, non-index) route.
+ */
+const findFirstSpecificMatchingRoute = (routeChildren, remainingPath) => {
+    return routeChildren.find((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.
+ *
+ * Uses exact first-segment matching: the remaining path's first segment
+ * must exactly equal a route's first segment to block the wildcard.
+ * The outlet's mount path is always known from React Router's RouteContext,
+ * so no heuristic-based discovery is needed.
  */
 const couldSpecificRouteMatch = (routeChildren, remainingPath) => {
     const remainingFirstSegment = remainingPath.split('/')[0];
@@ -233,26 +254,9 @@ const couldSpecificRouteMatch = (routeChildren, remainingPath) => {
         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)));
+        return routeFirstSegment === remainingFirstSegment;
     });
 };
-/**
- * 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
@@ -287,30 +291,55 @@ const computeAbsoluteRoutesParentPath = (routeChildren, currentPathname, outletM
  * Computes the parent path for a nested outlet based on the current pathname
  * and the outlet's route configuration.
  *
- * The algorithm finds the shortest parent path where a route matches the remaining path.
- * Priority: specific routes > wildcard routes > index routes (only at mount point)
+ * When the mount path is known (seeded from React Router's RouteContext), the
+ * parent path is simply the mount path — no iterative discovery needed. The
+ * iterative fallback only runs for outlets where RouteContext doesn't provide
+ * a parent match (typically root-level outlets on first render).
  *
  * @param options The options for computing the parent path.
  * @returns The computed parent path result.
  */
 const computeParentPath = (options) => {
     const { currentPathname, outletMountPath, routeChildren, hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = options;
-    // If pathname is outside the established mount path scope, skip computation
-    if (outletMountPath && !currentPathname.startsWith(outletMountPath)) {
+    // If pathname is outside the established mount path scope, skip computation.
+    // Use segment-aware comparison: /tabs-secondary must NOT match /tabs scope.
+    if (outletMountPath && !isPathnameInScope(currentPathname, outletMountPath)) {
         return { parentPath: undefined, outletMountPath };
     }
-    if ((hasRelativeRoutes || hasIndexRoute) && currentPathname.includes('/')) {
+    // Fast path: when the mount path is known (from React Router's RouteContext),
+    // the parent path IS the mount path. The iterative segment-by-segment discovery
+    // below was needed when the mount depth had to be guessed from URL structure,
+    // but with RouteContext we already know exactly where this outlet is mounted.
+    if (outletMountPath && (hasRelativeRoutes || hasIndexRoute)) {
+        return { parentPath: outletMountPath, outletMountPath };
+    }
+    // Fallback: mount path not yet known. Iterate through path segments to discover
+    // the correct parent depth. This only runs on first render of outlets where
+    // RouteContext doesn't provide a parent match (typically root-level outlets,
+    // which usually have absolute routes and take the absolute routes path below).
+    if (!outletMountPath && (hasRelativeRoutes || hasIndexRoute) && currentPathname.includes('/')) {
         const segments = currentPathname.split('/').filter(Boolean);
         if (segments.length >= 1) {
             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 match (highest priority)
                 if (!firstSpecificMatch && findSpecificMatch(routeChildren, remainingPath)) {
+                    // Don't let empty/default path routes (path="" or undefined) drive
+                    // the parent deeper than a wildcard match. An empty path route matching
+                    // when remainingPath is "" just means all segments were consumed.
+                    if (firstWildcardMatch) {
+                        const matchingRoute = findFirstSpecificMatchingRoute(routeChildren, remainingPath);
+                        if (matchingRoute) {
+                            const matchingPath = matchingRoute.props.path;
+                            if (!matchingPath || matchingPath === '') {
+                                continue;
+                            }
+                        }
+                    }
                     firstSpecificMatch = parentPath;
                     break;
                 }
@@ -322,9 +351,8 @@ const computeParentPath = (options) => {
                     }
                 }
                 // Check for index route match
-                const indexMatch = checkIndexMatch(parentPath, remainingPath, hasIndexRoute, outletMountPath);
-                if (indexMatch) {
-                    indexMatchAtMount = indexMatch;
+                if ((remainingPath === '' || remainingPath === '/') && hasIndexRoute) {
+                    indexMatchAtMount = parentPath;
                 }
             }
             // Fallback: check root level for embedded wildcard routes (e.g., "tab1/*")
@@ -335,12 +363,7 @@ const computeParentPath = (options) => {
                 }
             }
             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 };
+            return { parentPath: bestPath, outletMountPath: bestPath };
         }
     }
     // Handle outlets with only absolute routes
@@ -419,7 +442,7 @@ const getRoutesChildren = (node) => {
 const extractRouteChildren = (children) => {
     var _a;
     const routesChildren = (_a = getRoutesChildren(children)) !== null && _a !== void 0 ? _a : children;
-    return React.Children.toArray(routesChildren).filter((child) => React.isValidElement(child) && child.type === Route);
+    return React.Children.toArray(routesChildren).filter((child) => React.isValidElement(child) && (child.type === Route || child.type === IonRoute));
 };
 /**
  * Checks if a React element is a Navigate component (redirect).
@@ -432,28 +455,57 @@ const isNavigateElement = (element) => {
         (element.type === Navigate || (typeof element.type === 'function' && element.type.name === 'Navigate')));
 };
 
+/**
+ * Compares two routes by specificity for sorting (most specific first).
+ *
+ * Sort order:
+ * 1. Index routes come first
+ * 2. Wildcard-only routes (* or /*) come last
+ * 3. Exact matches (no wildcards/params) before wildcard/param routes
+ * 4. Among routes with same status, longer paths are more specific
+ */
+const compareRouteSpecificity = (a, b) => {
+    // Index routes come first
+    if (a.index && !b.index)
+        return -1;
+    if (!a.index && b.index)
+        return 1;
+    // Wildcard-only routes (* or /*) should come last
+    const aIsWildcardOnly = a.path === '*' || a.path === '/*';
+    const bIsWildcardOnly = b.path === '*' || b.path === '/*';
+    if (!aIsWildcardOnly && bIsWildcardOnly)
+        return -1;
+    if (aIsWildcardOnly && !bIsWildcardOnly)
+        return 1;
+    // Exact matches (no wildcards/params) come before wildcard/param routes
+    const aHasWildcard = a.path.includes('*') || a.path.includes(':');
+    const bHasWildcard = b.path.includes('*') || b.path.includes(':');
+    if (!aHasWildcard && bHasWildcard)
+        return -1;
+    if (aHasWildcard && !bHasWildcard)
+        return 1;
+    // Among routes with same wildcard status, longer paths are more specific
+    if (a.path.length !== b.path.length) {
+        return b.path.length - a.path.length;
+    }
+    return 0;
+};
 /**
  * Sorts view items by route specificity (most specific first).
- * - Exact matches (no wildcards/params) come first
- * - Among wildcard routes, longer paths are more specific
+ *
+ * Sort order aligns with findViewItemByPath in ReactRouterViewStack.tsx:
+ * 1. Index routes come first
+ * 2. Wildcard-only routes (* or /*) come last
+ * 3. Exact matches (no wildcards/params) come before wildcard/param routes
+ * 4. Among routes with same wildcard status, longer paths are more specific
  *
  * @param views The view items to sort.
  * @returns A new sorted array of view items.
  */
 const sortViewsBySpecificity = (views) => {
     return [...views].sort((a, b) => {
-        var _a, _b, _c, _d;
-        const pathA = ((_b = (_a = a.routeData) === null || _a === void 0 ? void 0 : _a.childProps) === null || _b === void 0 ? void 0 : _b.path) || '';
-        const pathB = ((_d = (_c = b.routeData) === null || _c === void 0 ? void 0 : _c.childProps) === null || _d === void 0 ? void 0 : _d.path) || '';
-        // Exact matches (no wildcards/params) come first
-        const aHasWildcard = pathA.includes('*') || pathA.includes(':');
-        const bHasWildcard = pathB.includes('*') || pathB.includes(':');
-        if (!aHasWildcard && bHasWildcard)
-            return -1;
-        if (aHasWildcard && !bHasWildcard)
-            return 1;
-        // Among wildcard routes, longer paths are more specific
-        return pathB.length - pathA.length;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return compareRouteSpecificity({ path: ((_b = (_a = a.routeData) === null || _a === void 0 ? void 0 : _a.childProps) === null || _b === void 0 ? void 0 : _b.path) || '', index: !!((_d = (_c = a.routeData) === null || _c === void 0 ? void 0 : _c.childProps) === null || _d === void 0 ? void 0 : _d.index) }, { path: ((_f = (_e = b.routeData) === null || _e === void 0 ? void 0 : _e.childProps) === null || _f === void 0 ? void 0 : _f.path) || '', index: !!((_h = (_g = b.routeData) === null || _g === void 0 ? void 0 : _g.childProps) === null || _h === void 0 ? void 0 : _h.index) });
     });
 };
 
@@ -504,7 +556,7 @@ const computeAbsolutePathnameBase = (routeElement, routeMatch, parentPathnameBas
  */
 const getFallbackParamsFromViewItems = (allViewItems, currentOutletId, currentPathname) => {
     var _a;
-    const params = {};
+    const matchingViews = [];
     for (const otherViewItem of allViewItems) {
         if (otherViewItem.outletId === currentOutletId)
             continue;
@@ -512,10 +564,20 @@ const getFallbackParamsFromViewItems = (allViewItems, currentOutletId, currentPa
         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);
+                matchingViews.push({
+                    params: otherMatch.params,
+                    pathLength: matchedPathname.length,
+                });
             }
         }
     }
+    // Sort ascending by path length so more-specific (longer) paths are applied
+    // last and their params take priority over less-specific ones.
+    matchingViews.sort((a, b) => a.pathLength - b.pathLength);
+    const params = {};
+    for (const view of matchingViews) {
+        Object.assign(params, view.params);
+    }
     return params;
 };
 /**
@@ -596,6 +658,18 @@ const resolveIndexRouteMatch = (viewItem, pathname, parentPath) => {
 class ReactRouterViewStack extends ViewStacks {
     constructor() {
         super();
+        /**
+         * Stores the computed parent path for each outlet.
+         * Used by findViewItemByPath to correctly evaluate index route matches
+         * without requiring the outlet's React element or route children.
+         */
+        this.outletParentPaths = new Map();
+        /**
+         * Stores the computed mount path for each outlet.
+         * Fed back into computeParentPath on subsequent calls to stabilize
+         * the parent path computation across navigations (mirrors StackManager.outletMountPath).
+         */
+        this.outletMountPaths = new Map();
         /**
          * Creates a new view item for the given outlet and react route element.
          * Associates route props with the matched route path for further lookups.
@@ -639,7 +713,7 @@ class ReactRouterViewStack extends ViewStacks {
                     if (hasParams) {
                         if (isWildcard) {
                             const existingPathnameBase = (_f = (_e = v.routeData) === null || _e === void 0 ? void 0 : _e.match) === null || _f === void 0 ? void 0 : _f.pathnameBase;
-                            const newMatch = matchComponent$1(reactElement, routeInfo.pathname, false);
+                            const newMatch = matchComponent$1(reactElement, routeInfo.pathname, false, this.outletParentPaths.get(outletId));
                             const newPathnameBase = newMatch === null || newMatch === void 0 ? void 0 : newMatch.pathnameBase;
                             if (existingPathnameBase !== newPathnameBase) {
                                 return false;
@@ -665,7 +739,7 @@ class ReactRouterViewStack extends ViewStacks {
                 existingViewItem.reactElement = reactElement;
                 existingViewItem.mount = true;
                 existingViewItem.ionPageElement = page || existingViewItem.ionPageElement;
-                const updatedMatch = matchComponent$1(reactElement, routeInfo.pathname, false) ||
+                const updatedMatch = matchComponent$1(reactElement, routeInfo.pathname, false, this.outletParentPaths.get(outletId)) ||
                     ((_a = existingViewItem.routeData) === null || _a === void 0 ? void 0 : _a.match) ||
                     createDefaultMatch(routeInfo.pathname, reactElement.props);
                 existingViewItem.routeData = {
@@ -687,7 +761,7 @@ class ReactRouterViewStack extends ViewStacks {
             if (reactElement.type === IonRoute) {
                 viewItem.disableIonPageManagement = reactElement.props.disableIonPageManagement;
             }
-            const initialMatch = matchComponent$1(reactElement, routeInfo.pathname, true) ||
+            const initialMatch = matchComponent$1(reactElement, routeInfo.pathname, true, this.outletParentPaths.get(outletId)) ||
                 createDefaultMatch(routeInfo.pathname, reactElement.props);
             viewItem.routeData = {
                 match: initialMatch,
@@ -704,10 +778,10 @@ class ReactRouterViewStack extends ViewStacks {
          * - Wraps the route element in <Routes> to support nested routing and ensure remounting
          * - Adds a unique key to <Routes> so React Router remounts routes when switching
          */
-        this.renderViewItem = (viewItem, routeInfo, parentPath) => {
+        this.renderViewItem = (viewItem, routeInfo, parentPath, reRender) => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             const routePath = viewItem.reactElement.props.path || '';
-            let match = matchComponent$1(viewItem.reactElement, routeInfo.pathname);
+            let match = matchComponent$1(viewItem.reactElement, routeInfo.pathname, false, parentPath);
             if (!match) {
                 const indexMatch = resolveIndexRouteMatch(viewItem, routeInfo.pathname, parentPath);
                 if (indexMatch) {
@@ -742,6 +816,7 @@ class ReactRouterViewStack extends ViewStacks {
                     // This ensures the redirect completes before removal
                     setTimeout(() => {
                         this.remove(viewItem);
+                        reRender === null || reRender === void 0 ? void 0 : reRender();
                     }, NAVIGATE_REDIRECT_DELAY_MS);
                 }
             }
@@ -765,6 +840,7 @@ class ReactRouterViewStack extends ViewStacks {
                         const stillNotNeeded = !viewItem.mount && !viewItem.ionPageElement;
                         if (stillNotNeeded) {
                             this.remove(viewItem);
+                            reRender === null || reRender === void 0 ? void 0 : reRender();
                         }
                     }, VIEW_CLEANUP_DELAY_MS);
                 }
@@ -775,25 +851,71 @@ class ReactRouterViewStack extends ViewStacks {
             }
             // Reactivate view if it matches but was previously deactivated
             // Don't reactivate if this is a parameterized route navigating to a different path instance
-            if (match && !viewItem.mount && !shouldSkipForDifferentParam) {
+            // Don't reactivate catch-all wildcard routes — they are created fresh by createViewItem
+            const isCatchAllWildcard = routePath === '*' || routePath === '/*';
+            if (match && !viewItem.mount && !shouldSkipForDifferentParam && !isCatchAllWildcard) {
                 viewItem.mount = true;
                 viewItem.routeData.match = match;
             }
-            // Deactivate wildcard routes and catch-all routes (empty path) when we have specific route matches
-            // This prevents "Not found" or fallback pages from showing alongside valid routes
+            // Deactivate wildcard (catch-all) and empty-path (default) routes when a more-specific route matches.
+            // This prevents "Not found" or fallback pages from showing alongside valid routes.
             if (routePath === '*' || routePath === '') {
                 // Check if any other view in this outlet has a match for the current route
-                const hasSpecificMatch = this.getViewItemsForOutlet(viewItem.outletId).some((v) => {
+                const outletViews = this.getViewItemsForOutlet(viewItem.outletId);
+                // When parent path context is available, compute the relative pathname once
+                // outside the loop since both routeInfo.pathname and parentPath are invariant.
+                const relativePathname = parentPath
+                    ? computeRelativeToParent(routeInfo.pathname, parentPath)
+                    : null;
+                let hasSpecificMatch = outletViews.some((v) => {
                     var _a, _b;
                     if (v.id === viewItem.id)
                         return false; // Skip self
                     const vRoutePath = ((_b = (_a = v.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path) || '';
                     if (vRoutePath === '*' || vRoutePath === '')
                         return false; // Skip other wildcard/empty routes
-                    // Check if this view item would match the current route
+                    // When parent path context is available and the route is relative, use
+                    // parent-path-aware matching. This avoids false positives from
+                    // derivePathnameToMatch's tail-slice heuristic, which can incorrectly
+                    // match route literals that appear at the wrong position in the pathname.
+                    // Example: pathname /parent/extra/details/99 with route details/:id —
+                    // the tail-slice extracts ["details","99"] producing a false match.
+                    if (parentPath && vRoutePath && !vRoutePath.startsWith('/')) {
+                        if (relativePathname === null) {
+                            return false; // Pathname is outside this outlet's parent scope
+                        }
+                        return !!matchPath({
+                            pathname: relativePathname,
+                            componentProps: v.reactElement.props,
+                        });
+                    }
+                    // Fallback to matchComponent when no parent path context is available
                     const vMatch = v.reactElement ? matchComponent$1(v.reactElement, routeInfo.pathname) : null;
                     return !!vMatch;
                 });
+                // For catch-all * routes, also deactivate when the pathname matches the outlet's
+                // parent path exactly. This means there are no remaining segments for the wildcard
+                // to catch, so the empty-path or index route should handle it instead.
+                if (!hasSpecificMatch && routePath === '*') {
+                    const outletParentPath = this.outletParentPaths.get(viewItem.outletId);
+                    if (outletParentPath) {
+                        const normalizedParent = normalizePathnameForComparison(outletParentPath);
+                        const normalizedPathname = normalizePathnameForComparison(routeInfo.pathname);
+                        if (normalizedPathname === normalizedParent) {
+                            // Check if there's an empty-path or index view item that should handle this
+                            const hasDefaultRoute = outletViews.some((v) => {
+                                var _a, _b, _c, _d;
+                                if (v.id === viewItem.id)
+                                    return false;
+                                const vRoutePath = (_b = (_a = v.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
+                                return vRoutePath === '' || vRoutePath === undefined || !!((_d = (_c = v.routeData) === null || _c === void 0 ? void 0 : _c.childProps) === null || _d === void 0 ? void 0 : _d.index);
+                            });
+                            if (hasDefaultRoute) {
+                                hasSpecificMatch = true;
+                            }
+                        }
+                    }
+                }
                 if (hasSpecificMatch) {
                     viewItem.mount = false;
                     if (viewItem.ionPageElement) {
@@ -838,33 +960,50 @@ class ReactRouterViewStack extends ViewStacks {
          * 3. Returns a list of React components that will be rendered inside the outlet
          *    Each view is wrapped in <ViewLifeCycleManager> to manage lifecycle and rendering
          */
-        this.getChildrenToRender = (outletId, ionRouterOutlet, routeInfo) => {
+        this.getChildrenToRender = (outletId, ionRouterOutlet, routeInfo, reRender, parentPathnameBase) => {
             const viewItems = this.getViewItemsForOutlet(outletId);
-            // Determine parentPath for nested outlets to properly evaluate index routes
+            // Seed the mount path from the parent route context if available.
+            // This provides the outlet's mount path immediately on first render,
+            // eliminating the need for heuristic-based discovery in computeParentPath.
+            if (parentPathnameBase && !this.outletMountPaths.has(outletId)) {
+                this.outletMountPaths.set(outletId, parentPathnameBase);
+            }
+            // Determine parentPath for outlets with relative or index routes.
+            // This populates outletParentPaths for findViewItemByPath's matchView
+            // and the catch-all deactivation logic in renderViewItem.
             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) {
-                    const routeChildren = extractRouteChildren(ionRouterOutlet.props.children);
-                    const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
-                    if (hasRelativeRoutes || hasIndexRoute) {
-                        const result = computeParentPath({
-                            currentPathname: routeInfo.pathname,
-                            outletMountPath: undefined,
-                            routeChildren,
-                            hasRelativeRoutes,
-                            hasIndexRoute,
-                            hasWildcardRoute,
-                        });
-                        parentPath = result.parentPath;
+                const routeChildren = extractRouteChildren(ionRouterOutlet.props.children);
+                const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
+                if (hasRelativeRoutes || hasIndexRoute) {
+                    const result = computeParentPath({
+                        currentPathname: routeInfo.pathname,
+                        outletMountPath: this.outletMountPaths.get(outletId),
+                        routeChildren,
+                        hasRelativeRoutes,
+                        hasIndexRoute,
+                        hasWildcardRoute,
+                    });
+                    parentPath = result.parentPath;
+                    // Persist the mount path for subsequent calls, mirroring StackManager.outletMountPath.
+                    // Unlike outletParentPaths (cleared when parentPath is undefined), the mount path is
+                    // intentionally sticky — it anchors the outlet's scope and is only removed in clear().
+                    if (result.outletMountPath && !this.outletMountPaths.has(outletId)) {
+                        this.outletMountPaths.set(outletId, result.outletMountPath);
                     }
                 }
             }
             catch (e) {
                 // Non-fatal: if we fail to compute parentPath, fall back to previous behavior
             }
+            // Store the computed parentPath for use in findViewItemByPath.
+            // Clear stale entries when parentPath is undefined (e.g., navigated out of scope).
+            if (parentPath !== undefined) {
+                this.outletParentPaths.set(outletId, parentPath);
+            }
+            else if (this.outletParentPaths.has(outletId)) {
+                this.outletParentPaths.delete(outletId);
+            }
             // Sync child elements with stored viewItems (e.g. to reflect new props)
             React.Children.forEach(ionRouterOutlet.props.children, (child) => {
                 // Ensure the child is a valid React element since we
@@ -908,7 +1047,7 @@ class ReactRouterViewStack extends ViewStacks {
                     const viewRoutePath = (_d = (_c = viewItem.reactElement) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.path;
                     if (viewRoutePath) {
                         // First try exact match using matchComponent
-                        const routeMatch = matchComponent$1(viewItem.reactElement, routeInfo.pathname);
+                        const routeMatch = matchComponent$1(viewItem.reactElement, routeInfo.pathname, false, parentPath);
                         if (routeMatch) {
                             // View matches current route, keep it
                             return true;
@@ -924,6 +1063,7 @@ class ReactRouterViewStack extends ViewStacks {
                             // View is outside current route hierarchy, remove it
                             setTimeout(() => {
                                 this.remove(viewItem);
+                                reRender();
                             }, 0);
                             return false;
                         }
@@ -931,7 +1071,7 @@ class ReactRouterViewStack extends ViewStacks {
                 }
                 return true;
             });
-            const renderedItems = renderableViewItems.map((viewItem) => this.renderViewItem(viewItem, routeInfo, parentPath));
+            const renderedItems = renderableViewItems.map((viewItem) => this.renderViewItem(viewItem, routeInfo, parentPath, reRender));
             return renderedItems;
         };
         /**
@@ -991,6 +1131,14 @@ class ReactRouterViewStack extends ViewStacks {
             super.add(viewItem);
             this.cleanupStaleViewItems(viewItem.outletId);
         };
+        /**
+         * Override clear to also clean up the stored parent path for the outlet.
+         */
+        this.clear = (outletId) => {
+            this.outletParentPaths.delete(outletId);
+            this.outletMountPaths.delete(outletId);
+            return super.clear(outletId);
+        };
         /**
          * Override remove
          */
@@ -1006,6 +1154,8 @@ class ReactRouterViewStack extends ViewStacks {
         let viewItem;
         let match = null;
         let viewStack;
+        // Capture stored parent paths for use in nested matchView/matchDefaultRoute functions
+        const storedParentPaths = this.outletParentPaths;
         if (outletId) {
             viewStack = sortViewsBySpecificity(this.getViewItemsForOutlet(outletId));
             viewStack.some(matchView);
@@ -1033,16 +1183,36 @@ class ReactRouterViewStack extends ViewStacks {
             if (mustBeIonRoute && !v.ionRoute)
                 return false;
             const viewItemPath = v.routeData.childProps.path || '';
+            // Skip unmounted catch-all wildcard views. After back navigation unmounts
+            // a wildcard view, it should not be reused for subsequent navigations.
+            // A fresh wildcard view will be created by createViewItem when needed.
+            if ((viewItemPath === '*' || viewItemPath === '/*') && !v.mount)
+                return false;
             const isIndexRoute = !!v.routeData.childProps.index;
             const previousMatch = (_a = v.routeData) === null || _a === void 0 ? void 0 : _a.match;
-            const result = v.reactElement ? matchComponent$1(v.reactElement, pathname) : null;
+            const outletParentPath = storedParentPaths.get(v.outletId);
+            const result = v.reactElement ? matchComponent$1(v.reactElement, pathname, false, outletParentPath) : null;
             if (!result) {
-                const indexMatch = resolveIndexRouteMatch(v, pathname, undefined);
+                const indexMatch = resolveIndexRouteMatch(v, pathname, outletParentPath);
                 if (indexMatch) {
                     match = indexMatch;
                     viewItem = v;
                     return true;
                 }
+                // Empty path routes (path="") should match when the pathname matches the
+                // outlet's parent path exactly (no remaining segments). matchComponent doesn't
+                // handle this because it lacks parent path context. Without this check, a
+                // catch-all * view item (which matches any pathname) would be incorrectly
+                // returned instead of the empty path route on back navigation.
+                if (viewItemPath === '' && !isIndexRoute && outletParentPath) {
+                    const normalizedParent = normalizePathnameForComparison(outletParentPath);
+                    const normalizedPathname = normalizePathnameForComparison(pathname);
+                    if (normalizedPathname === normalizedParent) {
+                        match = createDefaultMatch(pathname, v.routeData.childProps);
+                        viewItem = v;
+                        return true;
+                    }
+                }
             }
             if (result) {
                 const hasParams = result.params && Object.keys(result.params).length > 0;
@@ -1099,7 +1269,8 @@ class ReactRouterViewStack extends ViewStacks {
             const isDefaultRoute = childProps.path === undefined || childProps.path === '';
             const isIndexRoute = !!childProps.index;
             if (isIndexRoute) {
-                const indexMatch = resolveIndexRouteMatch(v, pathname, undefined);
+                const outletParentPath = storedParentPaths.get(v.outletId);
+                const indexMatch = resolveIndexRouteMatch(v, pathname, outletParentPath);
                 if (indexMatch) {
                     match = indexMatch;
                     viewItem = v;
@@ -1136,11 +1307,22 @@ class ReactRouterViewStack extends ViewStacks {
 /**
  * Utility to apply matchPath to a React element and return its match state.
  */
-function matchComponent$1(node, pathname, allowFallback = false) {
+function matchComponent$1(node, pathname, allowFallback = false, parentPath) {
     var _a;
     const routeProps = (_a = node === null || node === void 0 ? void 0 : node.props) !== null && _a !== void 0 ? _a : {};
     const routePath = routeProps.path;
-    const pathnameToMatch = derivePathnameToMatch(pathname, routePath);
+    let pathnameToMatch;
+    if (parentPath && routePath && !routePath.startsWith('/')) {
+        // When parent path is known, compute exact relative pathname
+        // instead of using the tail-slice heuristic
+        const relative = pathname.startsWith(parentPath)
+            ? pathname.slice(parentPath.length).replace(/^\//, '')
+            : pathname;
+        pathnameToMatch = relative;
+    }
+    else {
+        pathnameToMatch = derivePathnameToMatch(pathname, routePath);
+    }
     const match = matchPath({
         pathname: pathnameToMatch,
         componentProps: routeProps,
@@ -1191,11 +1373,13 @@ function clonePageElement(leavingViewHtml) {
  */
 const VIEW_UNMOUNT_DELAY_MS = 250;
 /**
- * Delay in milliseconds to wait for an IonPage element to be mounted before
- * proceeding with a page transition.
+ * Delay (ms) to wait for an IonPage to mount before proceeding with a
+ * page transition. Only container routes (nested outlets with no direct
+ * IonPage) actually hit this timeout; normal routes clear it early via
+ * registerIonPage, so a larger value here doesn't affect the happy path.
  */
-const ION_PAGE_WAIT_TIMEOUT_MS = 50;
-const isViewVisible = (el) => !el.classList.contains('ion-page-invisible') && !el.classList.contains('ion-page-hidden') && el.style.display !== 'none';
+const ION_PAGE_WAIT_TIMEOUT_MS = 300;
+const isViewVisible = (el) => !el.classList.contains('ion-page-invisible') && !el.classList.contains('ion-page-hidden') && el.style.visibility !== 'hidden';
 const hideIonPageElement = (element) => {
     if (element) {
         element.classList.add('ion-page-hidden');
@@ -1204,7 +1388,7 @@ const hideIonPageElement = (element) => {
 };
 const showIonPageElement = (element) => {
     if (element) {
-        element.style.removeProperty('display');
+        element.style.removeProperty('visibility');
         element.classList.remove('ion-page-hidden');
         element.removeAttribute('aria-hidden');
     }
@@ -1218,7 +1402,16 @@ class StackManager extends React.PureComponent {
         };
         this.pendingPageTransition = false;
         this.waitingForIonPage = false;
+        /** Tracks whether the component is mounted to guard async transition paths. */
+        this._isMounted = false;
+        /** In-flight requestAnimationFrame IDs from transitionPage, cancelled on unmount. */
+        this.transitionRafIds = [];
         this.outletMountPath = undefined;
+        /**
+         * Whether this outlet is at the root level (no parent route matches).
+         * Derived from UNSAFE_RouteContext in render() — empty matches means root.
+         */
+        this.isRootOutlet = true;
         this.registerIonPage = this.registerIonPage.bind(this);
         this.transitionPage = this.transitionPage.bind(this);
         this.handlePageTransition = this.handlePageTransition.bind(this);
@@ -1228,20 +1421,30 @@ class StackManager extends React.PureComponent {
     }
     /**
      * Determines the parent path for nested routing in React Router 6.
-     * Priority: specific routes > wildcard routes > index routes (only at mount point)
+     *
+     * When the mount path is known (seeded from UNSAFE_RouteContext), returns
+     * it directly — no iterative discovery needed. The computeParentPath
+     * fallback only runs for root outlets where RouteContext doesn't provide
+     * a parent match.
      */
     getParentPath() {
         const currentPathname = this.props.routeInfo.pathname;
-        // Prevent out-of-scope outlets from adopting unrelated routes
-        if (this.outletMountPath && !currentPathname.startsWith(this.outletMountPath)) {
+        // Prevent out-of-scope outlets from adopting unrelated routes.
+        // Uses segment-aware comparison: /tabs-secondary must NOT match /tabs scope.
+        if (this.outletMountPath && !isPathnameInScope(currentPathname, this.outletMountPath)) {
             return undefined;
         }
+        // Fast path: mount path is known from RouteContext. The parent path IS the
+        // mount path — no need to run the iterative computeParentPath algorithm.
+        if (this.outletMountPath && !this.isRootOutlet) {
+            return this.outletMountPath;
+        }
+        // Fallback: root outlet or mount path not yet seeded. Run the full
+        // computeParentPath algorithm to discover the parent depth.
         if (this.ionRouterOutlet) {
             const routeChildren = extractRouteChildren(this.ionRouterOutlet.props.children);
             const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
-            const isRootOutlet = this.id.startsWith('routerOutlet');
-            const needsParentPath = !isRootOutlet || hasRelativeRoutes || hasIndexRoute;
-            if (needsParentPath) {
+            if (!this.isRootOutlet || hasRelativeRoutes || hasIndexRoute) {
                 const result = computeParentPath({
                     currentPathname,
                     outletMountPath: this.outletMountPath,
@@ -1350,12 +1553,11 @@ class StackManager extends React.PureComponent {
      */
     handleOutOfContextNestedOutlet(parentPath, leavingViewItem) {
         var _a;
-        const isRootOutlet = this.id.startsWith('routerOutlet');
-        if (isRootOutlet || parentPath !== undefined || !this.ionRouterOutlet) {
+        if (this.isRootOutlet || parentPath !== undefined || !this.ionRouterOutlet) {
             return false;
         }
         const routesChildren = (_a = getRoutesChildren(this.ionRouterOutlet.props.children)) !== null && _a !== void 0 ? _a : this.ionRouterOutlet.props.children;
-        const routeChildren = React.Children.toArray(routesChildren).filter((child) => React.isValidElement(child) && child.type === Route);
+        const routeChildren = React.Children.toArray(routesChildren).filter((child) => React.isValidElement(child) && (child.type === Route || child.type === IonRoute));
         const hasRelativeRoutes = routeChildren.some((route) => {
             const path = route.props.path;
             return path && !path.startsWith('/') && path !== '*';
@@ -1374,8 +1576,7 @@ class StackManager extends React.PureComponent {
      * Handles nested outlet with no matching route. Returns true to abort.
      */
     handleNoMatchingRoute(enteringRoute, enteringViewItem, leavingViewItem) {
-        const isRootOutlet = this.id.startsWith('routerOutlet');
-        if (isRootOutlet || enteringRoute || enteringViewItem) {
+        if (this.isRootOutlet || enteringRoute || enteringViewItem) {
             return false;
         }
         hideIonPageElement(leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.ionPageElement);
@@ -1397,7 +1598,7 @@ class StackManager extends React.PureComponent {
         // When entering === leaving, the view is already visible - skip transition to prevent flash
         if (enteringViewItem === leavingViewItem) {
             if (isParameterizedRoute || isWildcardContainerRoute) {
-                const updatedMatch = matchComponent(enteringViewItem.reactElement, routeInfo.pathname, true);
+                const updatedMatch = matchComponent(enteringViewItem.reactElement, routeInfo.pathname, true, this.outletMountPath);
                 if (updatedMatch) {
                     enteringViewItem.routeData.match = updatedMatch;
                 }
@@ -1420,7 +1621,7 @@ class StackManager extends React.PureComponent {
             const currentInContainer = routeInfo.pathname.startsWith(containerBase + '/') || routeInfo.pathname === containerBase;
             const previousInContainer = routeInfo.lastPathname.startsWith(containerBase + '/') || routeInfo.lastPathname === containerBase;
             if (currentInContainer && previousInContainer) {
-                const updatedMatch = matchComponent(enteringViewItem.reactElement, routeInfo.pathname, true);
+                const updatedMatch = matchComponent(enteringViewItem.reactElement, routeInfo.pathname, true, this.outletMountPath);
                 if (updatedMatch) {
                     enteringViewItem.routeData.match = updatedMatch;
                 }
@@ -1589,17 +1790,19 @@ class StackManager extends React.PureComponent {
      * nested scrollbars (each page has its own IonContent). Top-level outlets
      * are unaffected and animate normally.
      *
-     * Uses inline display:none rather than ion-page-hidden class because core's
-     * beforeTransition() removes ion-page-hidden via setPageHidden().
-     * Inline display:none survives that removal, keeping the page hidden
-     * until React unmounts it after ionViewDidLeave fires.
+     * Uses inline visibility:hidden rather than ion-page-hidden class because
+     * core's beforeTransition() removes ion-page-hidden via setPageHidden().
+     * Inline visibility:hidden survives that removal, keeping the page hidden
+     * until React unmounts it after ionViewDidLeave fires. Unlike display:none,
+     * visibility:hidden preserves element geometry so commit() animations
+     * can resolve normally.
      */
     applySkipAnimationIfNeeded(enteringViewItem, leavingViewItem) {
         var _a;
         const isNestedOutlet = !!((_a = this.routerOutletElement) === null || _a === void 0 ? void 0 : _a.closest('.ion-page'));
         const shouldSkip = isNestedOutlet && !!leavingViewItem && enteringViewItem !== leavingViewItem;
         if (shouldSkip && (leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.ionPageElement)) {
-            leavingViewItem.ionPageElement.style.setProperty('display', 'none');
+            leavingViewItem.ionPageElement.style.setProperty('visibility', 'hidden');
             leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
         }
         return shouldSkip;
@@ -1676,6 +1879,20 @@ class StackManager extends React.PureComponent {
                     }
                 });
                 this.forceUpdate();
+                // Safety net: after forceUpdate triggers a React render cycle, check if
+                // any pages in this outlet are stuck with ion-page-invisible. This can
+                // happen when view lookup fails (e.g., wildcard-to-index transitions
+                // where the view item gets corrupted). The forceUpdate above causes
+                // React to render the correct component, but ion-page-invisible may
+                // persist if no transition runs for that page.
+                setTimeout(() => {
+                    if (!this._isMounted || !this.routerOutletElement)
+                        return;
+                    const stuckPages = this.routerOutletElement.querySelectorAll(':scope > .ion-page-invisible');
+                    stuckPages.forEach((page) => {
+                        page.classList.remove('ion-page-invisible');
+                    });
+                }, ION_PAGE_WAIT_TIMEOUT_MS);
             }
         }, ION_PAGE_WAIT_TIMEOUT_MS);
         this.forceUpdate();
@@ -1691,6 +1908,7 @@ class StackManager extends React.PureComponent {
             : { pathname: routeInfo.pushedByRoute || '' };
     }
     componentDidMount() {
+        this._isMounted = true;
         if (this.clearOutletTimeout) {
             /**
              * The clearOutlet integration with React Router is a bit hacky.
@@ -1721,6 +1939,17 @@ class StackManager extends React.PureComponent {
         }
     }
     componentWillUnmount() {
+        this._isMounted = false;
+        // Cancel any in-flight transition rAFs
+        for (const id of this.transitionRafIds) {
+            cancelAnimationFrame(id);
+        }
+        this.transitionRafIds = [];
+        // Disconnect any in-flight MutationObserver from waitForComponentsReady
+        if (this.transitionObserver) {
+            this.transitionObserver.disconnect();
+            this.transitionObserver = undefined;
+        }
         if (this.ionPageWaitTimeout) {
             clearTimeout(this.ionPageWaitTimeout);
             this.ionPageWaitTimeout = undefined;
@@ -2052,13 +2281,25 @@ class StackManager extends React.PureComponent {
                     enteringEl.classList.add('ion-page-invisible');
                 }
             }
-            await routerOutlet.commit(enteringEl, leavingEl, {
-                duration: skipTransition || skipAnimation || directionToUse === undefined ? 0 : undefined,
+            const commitDuration = skipTransition || skipAnimation || directionToUse === undefined ? 0 : undefined;
+            // Race commit against a timeout to recover from hangs
+            const commitPromise = routerOutlet.commit(enteringEl, leavingEl, {
+                duration: commitDuration,
                 direction: directionToUse,
                 showGoBack: !!routeInfo.pushedByRoute,
                 progressAnimation,
                 animationBuilder: routeInfo.routeAnimation,
             });
+            const timeoutMs = 5000;
+            const timeoutPromise = new Promise((resolve) => setTimeout(() => resolve('timeout'), timeoutMs));
+            const result = await Promise.race([commitPromise.then(() => 'done'), timeoutPromise]);
+            if (result === 'timeout') {
+                // Force entering page visible even though commit hung
+                enteringEl.classList.remove('ion-page-invisible');
+            }
+            if (!progressAnimation) {
+                enteringEl.classList.remove('ion-page-invisible');
+            }
         };
         const routerOutlet = this.routerOutletElement;
         const routeInfoFallbackDirection = routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root' ? undefined : routeInfo.routeDirection;
@@ -2066,7 +2307,7 @@ class StackManager extends React.PureComponent {
         if (enteringViewItem && enteringViewItem.ionPageElement && this.routerOutletElement) {
             if (leavingViewItem && leavingViewItem.ionPageElement && enteringViewItem === leavingViewItem) {
                 // Clone page for same-view transitions (e.g., /user/1 → /user/2)
-                const match = matchComponent(leavingViewItem.reactElement, routeInfo.pathname);
+                const match = matchComponent(leavingViewItem.reactElement, routeInfo.pathname, undefined, this.outletMountPath);
                 if (match) {
                     const newLeavingElement = clonePageElement(leavingViewItem.ionPageElement.outerHTML);
                     if (newLeavingElement) {
@@ -2087,21 +2328,21 @@ class StackManager extends React.PureComponent {
                 const isNonAnimatedTransition = directionToUse === undefined && !progressAnimation;
                 if (isNonAnimatedTransition && leavingEl) {
                     /**
-                     * Flicker prevention for non-animated transitions:
-                     * Skip commit() entirely for simple visibility swaps (like tab switches).
-                     * commit() runs animation logic that can cause intermediate paints even with
-                     * duration: 0. Instead, we directly swap visibility classes and wait for
-                     * components to be ready before showing the entering element.
+                     * Skip commit() for non-animated transitions (like tab switches).
+                     * commit() runs animation logic that can cause intermediate paints
+                     * even with duration: 0. Instead, swap visibility synchronously.
+                     *
+                     * Synchronous DOM class changes are batched into a single browser
+                     * paint, so there's no gap frame where neither page is visible and
+                     * no overlap frame where both pages are visible.
                      */
                     const enteringEl = enteringViewItem.ionPageElement;
                     // Ensure entering element has proper base classes
                     enteringEl.classList.add('ion-page');
-                    // Only add ion-page-invisible if not already visible (e.g., tab switches)
-                    if (!isViewVisible(enteringEl)) {
-                        enteringEl.classList.add('ion-page-invisible');
-                    }
-                    enteringEl.classList.remove('ion-page-hidden');
-                    enteringEl.removeAttribute('aria-hidden');
+                    // Clear ALL hidden state from entering element. showIonPageElement
+                    // removes visibility:hidden (from applySkipAnimationIfNeeded),
+                    // ion-page-hidden, and aria-hidden in one call.
+                    showIonPageElement(enteringEl);
                     // Handle can-go-back class since we're skipping commit() which normally sets this
                     if (routeInfo.pushedByRoute) {
                         enteringEl.classList.add('can-go-back');
@@ -2131,9 +2372,17 @@ class StackManager extends React.PureComponent {
                                 if (!resolved && checkReady()) {
                                     resolved = true;
                                     observer.disconnect();
+                                    if (this.transitionObserver === observer) {
+                                        this.transitionObserver = undefined;
+                                    }
                                     resolve();
                                 }
                             });
+                            // Disconnect any previous observer before tracking the new one
+                            if (this.transitionObserver) {
+                                this.transitionObserver.disconnect();
+                            }
+                            this.transitionObserver = observer;
                             observer.observe(enteringEl, {
                                 subtree: true,
                                 attributes: true,
@@ -2143,28 +2392,25 @@ class StackManager extends React.PureComponent {
                                 if (!resolved) {
                                     resolved = true;
                                     observer.disconnect();
+                                    if (this.transitionObserver === observer) {
+                                        this.transitionObserver = undefined;
+                                    }
                                     resolve();
                                 }
                             }, 100);
                         });
                     };
                     await waitForComponentsReady();
-                    // Swap visibility in sync with browser's render cycle
-                    await new Promise((resolve) => {
-                        requestAnimationFrame(() => {
-                            enteringEl.classList.remove('ion-page-invisible');
-                            // Second rAF ensures entering is painted before hiding leaving
-                            requestAnimationFrame(() => {
-                                leavingEl.classList.add('ion-page-hidden');
-                                leavingEl.setAttribute('aria-hidden', 'true');
-                                resolve();
-                            });
-                        });
-                    });
+                    // Bail out if the component unmounted during waitForComponentsReady
+                    if (!this._isMounted)
+                        return;
+                    // Swap visibility synchronously - show entering, hide leaving
+                    enteringEl.classList.remove('ion-page-invisible');
+                    leavingEl.classList.add('ion-page-hidden');
+                    leavingEl.setAttribute('aria-hidden', 'true');
                 }
                 else {
                     await runCommit(enteringViewItem.ionPageElement, leavingEl);
-                    // For animated transitions, hide leaving element after commit completes
                     if (leavingEl && !progressAnimation) {
                         leavingEl.classList.add('ion-page-hidden');
                         leavingEl.setAttribute('aria-hidden', 'true');
@@ -2178,33 +2424,89 @@ class StackManager extends React.PureComponent {
         const ionRouterOutlet = React.Children.only(children);
         // Store reference for use in getParentPath() and handlePageTransition()
         this.ionRouterOutlet = ionRouterOutlet;
-        const components = this.context.getChildrenToRender(this.id, this.ionRouterOutlet, this.props.routeInfo, () => {
-            // Callback triggers re-render when view items are modified during getChildrenToRender
-            this.forceUpdate();
-        });
-        return (React.createElement(StackContext.Provider, { value: this.stackContextValue }, React.cloneElement(ionRouterOutlet, {
-            ref: (node) => {
-                if (ionRouterOutlet.props.setRef) {
-                    // Needed to handle external refs from devs.
-                    ionRouterOutlet.props.setRef(node);
-                }
-                if (ionRouterOutlet.props.forwardedRef) {
-                    // Needed to handle external refs from devs.
-                    ionRouterOutlet.props.forwardedRef.current = node;
-                }
-                this.routerOutletElement = node;
-                const { ref } = ionRouterOutlet;
-                // Check for legacy refs.
-                if (typeof ref === 'function') {
-                    ref(node);
-                }
-            },
-        }, components)));
+        return (React.createElement(UNSAFE_RouteContext.Consumer, null, (parentContext) => {
+            // Derive the outlet's mount path from React Router's matched route context.
+            // This eliminates the need for heuristic-based mount path discovery in
+            // computeParentPath, since React Router already knows the matched base path.
+            const parentMatches = parentContext === null || parentContext === void 0 ? void 0 : parentContext.matches;
+            const parentPathnameBase = parentMatches && parentMatches.length > 0
+                ? parentMatches[parentMatches.length - 1].pathnameBase
+                : undefined;
+            // Derive isRootOutlet from RouteContext: empty matches means root.
+            this.isRootOutlet = !parentMatches || parentMatches.length === 0;
+            // Seed StackManager's mount path from the parent route context
+            if (parentPathnameBase && !this.outletMountPath) {
+                this.outletMountPath = parentPathnameBase;
+            }
+            const components = this.context.getChildrenToRender(this.id, this.ionRouterOutlet, this.props.routeInfo, () => {
+                // Callback triggers re-render when view items are modified during getChildrenToRender
+                this.forceUpdate();
+            }, parentPathnameBase);
+            return (React.createElement(StackContext.Provider, { value: this.stackContextValue }, React.cloneElement(ionRouterOutlet, {
+                ref: (node) => {
+                    if (ionRouterOutlet.props.setRef) {
+                        // Needed to handle external refs from devs.
+                        ionRouterOutlet.props.setRef(node);
+                    }
+                    if (ionRouterOutlet.props.forwardedRef) {
+                        // Needed to handle external refs from devs.
+                        ionRouterOutlet.props.forwardedRef.current = node;
+                    }
+                    this.routerOutletElement = node;
+                    const { ref } = ionRouterOutlet;
+                    // Check for legacy refs.
+                    if (typeof ref === 'function') {
+                        ref(node);
+                    }
+                },
+            }, components)));
+        }));
     }
     static get contextType() {
         return RouteManagerContext;
     }
 }
+/**
+ * Converts React Route elements to RouteObject format for use with matchRoutes().
+ * Filters out pathless routes (which are handled by fallback logic separately).
+ *
+ * When a basename is provided, absolute route paths are relativized by stripping
+ * the basename prefix. This is necessary because matchRoutes() strips the basename
+ * from the LOCATION pathname but not from route paths — absolute paths must be
+ * made relative to the basename for matching to work correctly.
+ *
+ * @param routeChildren The flat array of Route/IonRoute elements from the outlet.
+ * @param basename The resolved parent path (without trailing slash or `/*`) used to relativize absolute paths.
+ */
+function routeElementsToRouteObjects(routeChildren, basename) {
+    return routeChildren
+        .filter((child) => child.props.path != null || child.props.index)
+        .map((child) => {
+        const handle = { _element: child };
+        let path = child.props.path;
+        // Relativize absolute paths by stripping the basename prefix
+        if (path && path.startsWith('/') && basename) {
+            if (path === basename) {
+                path = '';
+            }
+            else if (path.startsWith(basename + '/')) {
+                path = path.slice(basename.length + 1);
+            }
+        }
+        if (child.props.index) {
+            return {
+                index: true,
+                handle,
+                caseSensitive: child.props.caseSensitive || undefined,
+            };
+        }
+        return {
+            path,
+            handle,
+            caseSensitive: child.props.caseSensitive || undefined,
+        };
+    });
+}
 /**
  * Finds the `<Route />` node matching the current route info.
  * If no `<Route />` can be matched, a fallback node is returned.
@@ -2215,137 +2517,62 @@ class StackManager extends React.PureComponent {
  * @param parentPath The parent path that was matched by the parent outlet (for nested routing)
  */
 function findRouteByRouteInfo(node, routeInfo, parentPath) {
-    var _a;
+    var _a, _b, _c;
     let matchedNode;
     let fallbackNode;
     // `<Route />` nodes are rendered inside of a <Routes /> node
     const routesChildren = (_a = getRoutesChildren(node)) !== null && _a !== void 0 ? _a : node;
     // Collect all route children
-    const routeChildren = React.Children.toArray(routesChildren).filter((child) => React.isValidElement(child) && child.type === Route);
-    // Sort routes by specificity (most specific first)
-    const sortedRoutes = routeChildren.sort((a, b) => {
-        const pathA = a.props.path || '';
-        const pathB = b.props.path || '';
-        // Index routes come first
-        if (a.props.index && !b.props.index)
-            return -1;
-        if (!a.props.index && b.props.index)
-            return 1;
-        // Wildcard-only routes (*) should come LAST
-        const aIsWildcardOnly = pathA === '*';
-        const bIsWildcardOnly = pathB === '*';
-        if (!aIsWildcardOnly && bIsWildcardOnly)
-            return -1;
-        if (aIsWildcardOnly && !bIsWildcardOnly)
-            return 1;
-        // Exact matches (no wildcards/params) come before wildcard/param routes
-        const aHasWildcard = pathA.includes('*') || pathA.includes(':');
-        const bHasWildcard = pathB.includes('*') || pathB.includes(':');
-        if (!aHasWildcard && bHasWildcard)
-            return -1;
-        if (aHasWildcard && !bHasWildcard)
-            return 1;
-        // Among routes with same wildcard status, longer paths are more specific
-        if (pathA.length !== pathB.length) {
-            return pathB.length - pathA.length;
-        }
-        return 0;
-    });
-    // 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;
-    // 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 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
-        }
-    }
-    // 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);
+    const routeChildren = React.Children.toArray(routesChildren).filter((child) => React.isValidElement(child) && (child.type === Route || child.type === IonRoute));
+    // Delegate route matching to RR6's matchRoutes(), which handles specificity ranking internally.
+    const basename = parentPath ? stripTrailingSlash(parentPath.replace('/*', '')) : undefined;
+    const routeObjects = routeElementsToRouteObjects(routeChildren, basename);
+    const matches = matchRoutes(routeObjects, { pathname: routeInfo.pathname }, basename);
+    if (matches && matches.length > 0) {
+        const bestMatch = matches[matches.length - 1];
+        matchedNode = (_c = (_b = bestMatch.route.handle) === null || _b === void 0 ? void 0 : _b._element) !== null && _c !== void 0 ? _c : undefined;
+    }
+    // Fallback: try pathless routes, but only if pathname is within scope.
+    if (!matchedNode) {
+        let pathnameInScope = true;
+        if (parentPath) {
+            pathnameInScope = isPathnameInScope(routeInfo.pathname, parentPath);
         }
         else {
-            pathForMatch = pathnameToMatch;
-        }
-        const match = matchPath({
-            pathname: pathForMatch,
-            componentProps: child.props,
-        });
-        if (match) {
-            matchedNode = child;
-            break;
-        }
-    }
-    if (matchedNode) {
-        return matchedNode;
-    }
-    // If we haven't found a node, try to find one that doesn't have a path prop (fallback route)
-    // BUT only return the fallback if the current pathname is within the outlet's scope.
-    // For outlets with absolute paths, compute the common prefix to determine scope.
-    const absolutePathRoutes = routeChildren.filter((r) => r.props.path && r.props.path.startsWith('/'));
-    // Determine if pathname is within scope before returning fallback
-    let isPathnameInScope = true;
-    if (absolutePathRoutes.length > 0) {
-        // Find common prefix of all absolute paths to determine outlet scope
-        const absolutePaths = absolutePathRoutes.map((r) => r.props.path);
-        const commonPrefix = computeCommonPrefix(absolutePaths);
-        // If we have a common prefix, check if the current pathname is within that scope
-        if (commonPrefix && commonPrefix !== '/') {
-            isPathnameInScope = routeInfo.pathname.startsWith(commonPrefix);
+            const absolutePathRoutes = routeChildren.filter((r) => r.props.path && r.props.path.startsWith('/'));
+            if (absolutePathRoutes.length > 0) {
+                const absolutePaths = absolutePathRoutes.map((r) => r.props.path);
+                const commonPrefix = computeCommonPrefix(absolutePaths);
+                if (commonPrefix && commonPrefix !== '/') {
+                    pathnameInScope = routeInfo.pathname.startsWith(commonPrefix);
+                }
+            }
         }
-    }
-    // Only look for fallback route if pathname is within scope
-    if (isPathnameInScope) {
-        for (const child of routeChildren) {
-            if (!child.props.path) {
-                fallbackNode = child;
-                break;
+        if (pathnameInScope) {
+            for (const child of routeChildren) {
+                if (!child.props.path) {
+                    fallbackNode = child;
+                    break;
+                }
             }
         }
     }
     return matchedNode !== null && matchedNode !== void 0 ? matchedNode : fallbackNode;
 }
-function matchComponent(node, pathname, forceExact) {
+function matchComponent(node, pathname, forceExact, parentPath) {
     var _a;
     const routePath = (_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.path;
-    const pathnameToMatch = derivePathnameToMatch(pathname, routePath);
+    let pathnameToMatch;
+    if (parentPath && routePath && !routePath.startsWith('/')) {
+        // When parent path is known, compute exact relative pathname
+        const relative = pathname.startsWith(parentPath)
+            ? pathname.slice(parentPath.length).replace(/^\//, '')
+            : pathname;
+        pathnameToMatch = relative;
+    }
+    else {
+        pathnameToMatch = derivePathnameToMatch(pathname, routePath);
+    }
     return matchPath({
         pathname: pathnameToMatch,
         componentProps: Object.assign(Object.assign({}, node.props), { end: forceExact }),
@@ -2426,6 +2653,16 @@ const IonRouter = ({ children, registerHistoryListener }) => {
         // for future navigations once React has committed the mount. This avoids
         // duplicate entries when React StrictMode runs an extra render pre-commit.
         locationHistory.current.add(routeInfo);
+        // If IonTabBar already called handleSetCurrentTab during render (before this
+        // effect), the tab was stored in currentTab.current but the history entry was
+        // not yet seeded. Apply the pending tab to the seed entry now.
+        if (currentTab.current) {
+            const ri = Object.assign({}, locationHistory.current.current());
+            if (ri.tab !== currentTab.current) {
+                ri.tab = currentTab.current;
+                locationHistory.current.update(ri);
+            }
+        }
         registerHistoryListener(handleHistoryChange);
         didMountRef.current = true;
     }, []);
@@ -2484,15 +2721,19 @@ const IonRouter = ({ children, registerHistoryListener }) => {
             leavingLocationInfo = locationHistory.current.current();
         }
         const leavingUrl = leavingLocationInfo.pathname + leavingLocationInfo.search;
-        if (leavingUrl !== location.pathname) {
+        if (leavingUrl !== location.pathname + location.search) {
             if (!incomingRouteParams.current) {
-                // Determine if the destination is a tab route by checking if it matches
-                // the pattern of tab routes (containing /tabs/ in the path)
-                const isTabRoute = /\/tabs(\/|$)/.test(location.pathname);
-                const tabToUse = isTabRoute ? currentTab.current : undefined;
-                // If we're leaving tabs entirely, clear the current tab
-                if (!isTabRoute && currentTab.current) {
-                    currentTab.current = undefined;
+                // Use history-based tab detection instead of URL-pattern heuristics,
+                // so tab routes work with any URL structure (not just paths containing "/tabs").
+                // Fall back to currentTab.current only when the destination is within the
+                // current tab's path hierarchy (prevents non-tab routes from inheriting a tab).
+                let tabToUse = locationHistory.current.findTabForPathname(location.pathname);
+                if (!tabToUse && currentTab.current) {
+                    const tabFirstRoute = locationHistory.current.getFirstRouteInfoForTab(currentTab.current);
+                    const tabRootPath = tabFirstRoute === null || tabFirstRoute === void 0 ? void 0 : tabFirstRoute.pathname;
+                    if (tabRootPath && (location.pathname === tabRootPath || location.pathname.startsWith(tabRootPath + '/'))) {
+                        tabToUse = currentTab.current;
+                    }
                 }
                 /**
                  * A `REPLACE` action can be triggered by React Router's
@@ -2532,6 +2773,8 @@ const IonRouter = ({ children, registerHistoryListener }) => {
                     }
                     else {
                         // It's a non-linear history path like a direct link.
+                        // Still push the current location key so browser forward is detectable.
+                        forwardStack.current.push(currentLocationKeyRef.current);
                         incomingRouteParams.current = {
                             routeAction: 'pop',
                             routeDirection: 'none',
@@ -2556,7 +2799,7 @@ const IonRouter = ({ children, registerHistoryListener }) => {
             }
             let routeInfo;
             // If we're navigating away from tabs to a non-tab route, clear the current tab
-            if (!/\/tabs(\/|$)/.test(location.pathname) && currentTab.current) {
+            if (!locationHistory.current.findTabForPathname(location.pathname) && currentTab.current) {
                 currentTab.current = undefined;
             }
             /**
@@ -2711,7 +2954,13 @@ const IonRouter = ({ children, registerHistoryListener }) => {
      */
     const handleSetCurrentTab = (tab) => {
         currentTab.current = tab;
-        const ri = Object.assign({}, locationHistory.current.current());
+        const current = locationHistory.current.current();
+        if (!current) {
+            // locationHistory not yet seeded (e.g., called during initial render
+            // before mount effect). The mount effect will seed the correct entry.
+            return;
+        }
+        const ri = Object.assign({}, current);
         if (ri.tab !== tab) {
             ri.tab = tab;
             locationHistory.current.update(ri);
@@ -2755,7 +3004,7 @@ const IonRouter = ({ children, registerHistoryListener }) => {
                  * e.g., `/home` → `/settings` → back to `/home`
                  */
                 const condition1 = routeInfo.lastPathname === routeInfo.pushedByRoute;
-                const condition2 = prevInfo.pathname === routeInfo.pushedByRoute && routeInfo.tab === '' && prevInfo.tab === '';
+                const condition2 = prevInfo.pathname === routeInfo.pushedByRoute && !routeInfo.tab && !prevInfo.tab;
                 if (condition1 || condition2) {
                     // Record the current location key so browser forward is detectable
                     forwardStack.current.push(currentLocationKeyRef.current);
@@ -2809,26 +3058,29 @@ const IonRouter = ({ children, registerHistoryListener }) => {
         // is also within tabs. If not, we should clear the tab context.
         let navigationTab = tab;
         // If no explicit tab is provided and we're in a tab context,
-        // check if the destination path is outside of the current tab context
+        // check if the destination path is outside of the current tab context.
+        // Uses history-based tab detection instead of URL pattern matching,
+        // so it works with any tab URL structure.
         if (!tab && currentTab.current && path) {
-            // Get the current route info to understand where we are
-            const currentRoute = locationHistory.current.current();
-            // If we're navigating from a tab route to a completely different path structure,
-            // we should clear the tab context. This is a simplified check that assumes
-            // tab routes share a common parent path.
-            if (currentRoute && currentRoute.pathname) {
-                // Extract the base tab path (e.g., /routing/tabs from /routing/tabs/home)
-                const tabBaseMatch = currentRoute.pathname.match(/^(.*\/tabs)/);
-                if (tabBaseMatch) {
-                    const tabBasePath = tabBaseMatch[1];
-                    // If the new path doesn't start with the tab base path, we're leaving tabs
-                    if (!path.startsWith(tabBasePath)) {
-                        currentTab.current = undefined;
-                        navigationTab = undefined;
+            // Check if destination was previously visited in a tab context
+            const destinationTab = locationHistory.current.findTabForPathname(path);
+            if (destinationTab) {
+                // Previously visited as a tab route - use the known tab
+                navigationTab = destinationTab;
+            }
+            else {
+                // New destination - check if it's a child of the current tab's root path
+                const tabFirstRoute = locationHistory.current.getFirstRouteInfoForTab(currentTab.current);
+                if (tabFirstRoute) {
+                    const tabRootPath = tabFirstRoute.pathname;
+                    if (path === tabRootPath || path.startsWith(tabRootPath + '/')) {
+                        // Still within the current tab's path hierarchy
+                        navigationTab = currentTab.current;
                     }
                     else {
-                        // Still within tabs, preserve the tab context
-                        navigationTab = currentTab.current;
+                        // Destination is outside the current tab context
+                        currentTab.current = undefined;
+                        navigationTab = undefined;
                     }
                 }
             }
@@ -2914,9 +3166,9 @@ const RouterContent$1 = ({ children }) => {
     const location = useLocation$1();
     const navigationType = useNavigationType$1();
     const historyListenHandler = useRef();
-    const registerHistoryListener = (cb) => {
+    const registerHistoryListener = useCallback((cb) => {
         historyListenHandler.current = cb;
-    };
+    }, []);
     /**
      * Processes navigation changes within the application.
      *
@@ -2929,14 +3181,14 @@ const RouterContent$1 = ({ children }) => {
      * @param action The type of navigation action ('PUSH', 'POP', or
      * 'REPLACE').
      */
-    const handleHistoryChange = (location, action) => {
+    const handleHistoryChange = useCallback((loc, act) => {
         if (historyListenHandler.current) {
-            historyListenHandler.current(location, action);
+            historyListenHandler.current(loc, act);
         }
-    };
+    }, []);
     useEffect(() => {
         handleHistoryChange(location, navigationType);
-    }, [location, navigationType]);
+    }, [location, navigationType, handleHistoryChange]);
     return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
 };
 const IonReactMemoryRouter = (_a) => {
@@ -2953,9 +3205,9 @@ const RouterContent = ({ children }) => {
     const location = useLocation();
     const navigationType = useNavigationType();
     const historyListenHandler = useRef();
-    const registerHistoryListener = (cb) => {
+    const registerHistoryListener = useCallback((cb) => {
         historyListenHandler.current = cb;
-    };
+    }, []);
     /**
      * Processes navigation changes within the application.
      *
@@ -2968,14 +3220,14 @@ const RouterContent = ({ children }) => {
      * @param action The type of navigation action ('PUSH', 'POP', or
      * 'REPLACE').
      */
-    const handleHistoryChange = (location, action) => {
+    const handleHistoryChange = useCallback((loc, act) => {
         if (historyListenHandler.current) {
-            historyListenHandler.current(location, action);
+            historyListenHandler.current(loc, act);
         }
-    };
+    }, []);
     useEffect(() => {
         handleHistoryChange(location, navigationType);
-    }, [location, navigationType]);
+    }, [location, navigationType, handleHistoryChange]);
     return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
 };
 const IonReactHashRouter = (_a) => {