@ionic/react-router 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/index.js

@@ -1,245 +1,2187 @@
-import { __rest } from 'tslib';
-import { createBrowserHistory, createHashHistory } from 'history';
-import React from 'react';
-import { withRouter, Router } from 'react-router-dom';
-import { ViewStacks, generateId, IonRoute, ViewLifeCycleManager, StackContext, RouteManagerContext, getConfig, LocationHistory, NavManager } from '@ionic/react';
-import { Route, matchPath as matchPath$1, Router as Router$1 } from 'react-router';
+import React, { useRef, useState, useEffect, useCallback } from '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, createDebugLogger, StackContext, RouteManagerContext, LocationHistory, NavManager, getConfig } from '@ionic/react';
+import { MemoryRouter, useLocation as useLocation$1, useNavigationType as useNavigationType$1 } from 'react-router';
 
-class IonRouteInner extends React.PureComponent {
-    render() {
-        return (React.createElement(Route, Object.assign({ path: this.props.path, exact: this.props.exact, render: this.props.render }, (this.props.computedMatch !== undefined
-            ? {
-                computedMatch: this.props.computedMatch,
-            }
-            : {}))));
-    }
-}
+const IonRouteInner = ({ path, index, caseSensitive, element }) => {
+    return React.createElement(Route, { path: path, index: index, caseSensitive: caseSensitive, element: element });
+};
 
 /**
- * @see https://v5.reactrouter.com/web/api/matchPath
+ * The matchPath function is used only for matching paths, not rendering components or elements.
+ * @see https://reactrouter.com/v6/utils/match-path
  */
-const matchPath = ({ pathname, componentProps, }) => {
-    const { exact, component } = componentProps;
-    const path = componentProps.path || componentProps.from;
-    /***
-     * The props to match against, they are identical
-     * to the matching props `Route` accepts. It could also be a string
-     * or an array of strings as shortcut for `{ path }`.
-     */
-    const matchProps = {
-        exact,
+const matchPath = ({ pathname, componentProps }) => {
+    const { path, index, ...restProps } = componentProps;
+    // Handle index routes - they match when pathname is empty or just "/"
+    if (index && !path) {
+        if (pathname === '' || pathname === '/') {
+            return {
+                params: {},
+                pathname: pathname,
+                pathnameBase: pathname || '/',
+                pattern: {
+                    path: '',
+                    caseSensitive: false,
+                    end: true,
+                },
+            };
+        }
+        return null;
+    }
+    // Handle empty path routes - they match when pathname is also empty or just "/"
+    if (path === '' || path === undefined) {
+        if (pathname === '' || pathname === '/') {
+            return {
+                params: {},
+                pathname: pathname,
+                pathnameBase: pathname || '/',
+                pattern: {
+                    path: '',
+                    caseSensitive: restProps.caseSensitive ?? false,
+                    end: restProps.end ?? true,
+                },
+            };
+        }
+        return null;
+    }
+    // For relative paths (don't start with '/'), normalize both path and pathname for matching
+    if (!path.startsWith('/')) {
+        const matchOptions = {
+            path: `/${path}`,
+            ...restProps,
+        };
+        if (matchOptions?.end === undefined) {
+            matchOptions.end = !path.endsWith('*');
+        }
+        const normalizedPathname = pathname.startsWith('/') ? pathname : `/${pathname}`;
+        const match = matchPath$1(matchOptions, normalizedPathname);
+        if (match) {
+            // Adjust the match to remove the leading '/' we added
+            return {
+                ...match,
+                pathname: pathname,
+                pathnameBase: match.pathnameBase === '/' ? '/' : match.pathnameBase.slice(1),
+                pattern: {
+                    ...match.pattern,
+                    path: path,
+                },
+            };
+        }
+        return null;
+    }
+    // For absolute paths, use React Router's matcher directly.
+    // React Router v6 routes default to `end: true` unless the pattern
+    // explicitly opts into wildcards with `*`. Mirror that behaviour so
+    // matching parity stays aligned with <Route>.
+    const matchOptions = {
         path,
-        component,
+        ...restProps,
     };
-    const match = matchPath$1(pathname, matchProps);
-    if (!match) {
+    if (matchOptions?.end === undefined) {
+        matchOptions.end = !path.endsWith('*');
+    }
+    return matchPath$1(matchOptions, pathname);
+};
+/**
+ * Determines the portion of a pathname that a given route pattern should match against.
+ * For absolute route patterns we return the full pathname. For relative patterns we
+ * strip off the already-matched parent segments so React Router receives the remainder.
+ */
+const derivePathnameToMatch = (fullPathname, routePath) => {
+    // For absolute or empty routes, use the full pathname as-is
+    if (!routePath || routePath === '' || routePath.startsWith('/')) {
+        return fullPathname;
+    }
+    const trimmedPath = fullPathname.startsWith('/') ? fullPathname.slice(1) : fullPathname;
+    if (!trimmedPath) {
+        // For root-level relative routes (pathname is "/" and routePath is relative),
+        // return the full pathname so matchPath can normalize both.
+        // This allows routes like <Route path="foo/*" .../> at root level to work correctly.
+        return fullPathname;
+    }
+    const fullSegments = trimmedPath.split('/').filter(Boolean);
+    if (fullSegments.length === 0) {
+        return '';
+    }
+    const routeSegments = routePath.split('/').filter(Boolean);
+    if (routeSegments.length === 0) {
+        return trimmedPath;
+    }
+    const wildcardIndex = routeSegments.findIndex((segment) => segment === '*' || segment === '**');
+    if (wildcardIndex >= 0) {
+        const baseSegments = routeSegments.slice(0, wildcardIndex);
+        if (baseSegments.length === 0) {
+            return trimmedPath;
+        }
+        const startIndex = fullSegments.findIndex((_, idx) => baseSegments.every((seg, segIdx) => {
+            const target = fullSegments[idx + segIdx];
+            if (!target) {
+                return false;
+            }
+            if (seg.startsWith(':')) {
+                return true;
+            }
+            return target === seg;
+        }));
+        if (startIndex >= 0) {
+            return fullSegments.slice(startIndex).join('/');
+        }
+    }
+    if (routeSegments.length <= fullSegments.length) {
+        return fullSegments.slice(fullSegments.length - routeSegments.length).join('/');
+    }
+    return fullSegments[fullSegments.length - 1] ?? trimmedPath;
+};
+
+/**
+ * Finds the longest common prefix among an array of paths.
+ * Used to determine the scope of an outlet with absolute routes.
+ *
+ * @param paths An array of absolute path strings.
+ * @returns The common prefix shared by all paths.
+ */
+const computeCommonPrefix = (paths) => {
+    if (paths.length === 0)
+        return '';
+    if (paths.length === 1) {
+        // For a single path, extract the directory-like prefix
+        // e.g., /dynamic-routes/home -> /dynamic-routes
+        const segments = paths[0].split('/').filter(Boolean);
+        if (segments.length > 1) {
+            return '/' + segments.slice(0, -1).join('/');
+        }
+        return '/' + segments[0];
+    }
+    // Split all paths into segments
+    const segmentArrays = paths.map((p) => p.split('/').filter(Boolean));
+    const minLength = Math.min(...segmentArrays.map((s) => s.length));
+    const commonSegments = [];
+    for (let i = 0; i < minLength; i++) {
+        const segment = segmentArrays[0][i];
+        // Skip segments with route parameters or wildcards
+        if (segment.includes(':') || segment.includes('*')) {
+            break;
+        }
+        const allMatch = segmentArrays.every((s) => s[i] === segment);
+        if (allMatch) {
+            commonSegments.push(segment);
+        }
+        else {
+            break;
+        }
+    }
+    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 `/*`).
+ */
+const isSplatOnlyRoute = (routePath) => {
+    return routePath === '*' || routePath === '/*';
+};
+/**
+ * Checks if a route has an embedded wildcard (e.g., "tab1/*" but not "*" or "/*").
+ */
+const hasEmbeddedWildcard = (routePath) => {
+    return !!routePath && routePath.includes('*') && !isSplatOnlyRoute(routePath);
+};
+/**
+ * Checks if a route with an embedded wildcard matches a pathname.
+ */
+const matchesEmbeddedWildcardRoute = (route, pathname) => {
+    const routePath = route.props.path;
+    if (!hasEmbeddedWildcard(routePath)) {
+        return false;
+    }
+    return !!matchPath({ pathname, componentProps: route.props });
+};
+/**
+ * Checks if a route is a specific match (not wildcard-only or index).
+ */
+const isSpecificRouteMatch = (route, remainingPath) => {
+    const routePath = route.props.path;
+    if (route.props.index || isSplatOnlyRoute(routePath)) {
         return false;
     }
-    return match;
+    return !!matchPath({ pathname: remainingPath, componentProps: route.props });
+};
+/**
+ * Analyzes route children to determine their characteristics.
+ *
+ * @param routeChildren The route children to analyze.
+ * @returns Analysis of the route characteristics.
+ */
+const analyzeRouteChildren = (routeChildren) => {
+    const hasRelativeRoutes = routeChildren.some((route) => {
+        const path = route.props.path;
+        return path && !path.startsWith('/') && path !== '*';
+    });
+    const hasIndexRoute = routeChildren.some((route) => route.props.index);
+    const hasWildcardRoute = routeChildren.some((route) => {
+        const routePath = route.props.path;
+        return routePath === '*' || routePath === '/*';
+    });
+    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));
+};
+/**
+ * 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];
+    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;
+        return routeFirstSegment === remainingFirstSegment;
+    });
+};
+/**
+ * Determines the best parent path from the available matches.
+ * Priority: specific > wildcard > index
+ */
+const selectBestMatch = (specificMatch, wildcardMatch, indexMatch) => {
+    return specificMatch ?? wildcardMatch ?? 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.
+ *
+ * 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.
+    // Use segment-aware comparison: /tabs-secondary must NOT match /tabs scope.
+    if (outletMountPath && !isPathnameInScope(currentPathname, outletMountPath)) {
+        return { parentPath: undefined, outletMountPath };
+    }
+    // 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;
+            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;
+                }
+                // 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;
+                    }
+                }
+                // Check for index route match
+                if ((remainingPath === '' || remainingPath === '/') && hasIndexRoute) {
+                    indexMatchAtMount = parentPath;
+                }
+            }
+            // Fallback: check root level for embedded wildcard routes (e.g., "tab1/*")
+            if (!firstSpecificMatch) {
+                const fullRemainingPath = segments.join('/');
+                if (routeChildren.some((route) => matchesEmbeddedWildcardRoute(route, fullRemainingPath))) {
+                    firstSpecificMatch = '/';
+                }
+            }
+            const bestPath = selectBestMatch(firstSpecificMatch, firstWildcardMatch, indexMatchAtMount);
+            return { parentPath: bestPath, outletMountPath: bestPath };
+        }
+    }
+    // Handle outlets with only absolute routes
+    if (!hasRelativeRoutes && !hasIndexRoute) {
+        const result = computeAbsoluteRoutesParentPath(routeChildren, currentPathname, outletMountPath);
+        if (result) {
+            return result;
+        }
+    }
+    return { parentPath: outletMountPath, outletMountPath };
+};
+
+/**
+ * Ensures the given path has a leading slash.
+ *
+ * @param value The path string to normalize.
+ * @returns The path with a leading slash.
+ */
+const ensureLeadingSlash = (value) => {
+    if (value === '') {
+        return '/';
+    }
+    return value.startsWith('/') ? value : `/${value}`;
+};
+/**
+ * Strips the trailing slash from a path, unless it's the root path.
+ *
+ * @param value The path string to normalize.
+ * @returns The path without a trailing slash.
+ */
+const stripTrailingSlash = (value) => {
+    return value.length > 1 && value.endsWith('/') ? value.slice(0, -1) : value;
+};
+/**
+ * Normalizes a pathname for comparison by ensuring a leading slash
+ * and removing trailing slashes.
+ *
+ * @param value The pathname to normalize, can be undefined.
+ * @returns A normalized pathname string.
+ */
+const normalizePathnameForComparison = (value) => {
+    if (!value || value === '') {
+        return '/';
+    }
+    const withLeadingSlash = ensureLeadingSlash(value);
+    return stripTrailingSlash(withLeadingSlash);
+};
+
+/**
+ * Extracts the children from a Routes wrapper component.
+ * The use of `<Routes />` is encouraged with React Router v6.
+ *
+ * @param node The React node to extract Routes children from.
+ * @returns The children of the Routes component, or undefined if not found.
+ */
+const getRoutesChildren = (node) => {
+    let routesNode;
+    React.Children.forEach(node, (child) => {
+        if (child.type === Routes) {
+            routesNode = child;
+        }
+    });
+    if (routesNode) {
+        // The children of the `<Routes />` component are most likely
+        // (and should be) the `<Route />` components.
+        return routesNode.props.children;
+    }
+    return undefined;
+};
+/**
+ * Extracts Route children from a node (either directly or from a Routes wrapper).
+ *
+ * @param children The children to extract routes from.
+ * @returns An array of Route elements.
+ */
+const extractRouteChildren = (children) => {
+    const routesChildren = getRoutesChildren(children) ?? children;
+    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).
+ *
+ * @param element The element to check.
+ * @returns True if the element is a Navigate component.
+ */
+const isNavigateElement = (element) => {
+    return (React.isValidElement(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).
+ *
+ * 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) => compareRouteSpecificity({ path: a.routeData?.childProps?.path || '', index: !!a.routeData?.childProps?.index }, { path: b.routeData?.childProps?.path || '', index: !!b.routeData?.childProps?.index }));
 };
 
+/**
+ * `ReactRouterViewStack` is a custom navigation manager used in Ionic React
+ * apps to map React Router route elements (such as `<IonRoute>`) to "view
+ * items" that Ionic can manage in a view stack. This is critical to maintain
+ * Ionic’s animation, lifecycle, and history behavior across views.
+ */
+/**
+ * Delay in milliseconds before removing a Navigate view item after a redirect.
+ * This ensures the redirect navigation completes before the view is removed.
+ */
+const NAVIGATE_REDIRECT_DELAY_MS = 100;
+/**
+ * Delay in milliseconds before cleaning up a view without an IonPage element.
+ * 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?.pathnameBase) {
+        const relativeBase = routeMatch.pathnameBase.startsWith('/')
+            ? routeMatch.pathnameBase.slice(1)
+            : routeMatch.pathnameBase;
+        return parentPathnameBase === '/' ? `/${relativeBase}` : `${parentPathnameBase}/${relativeBase}`;
+    }
+    if (isIndexRoute) {
+        return parentPathnameBase;
+    }
+    return 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) => {
+    const matchingViews = [];
+    for (const otherViewItem of allViewItems) {
+        if (otherViewItem.outletId === currentOutletId)
+            continue;
+        const otherMatch = otherViewItem.routeData?.match;
+        if (otherMatch?.params && Object.keys(otherMatch.params).length > 0) {
+            const matchedPathname = otherMatch.pathnameBase || otherMatch.pathname;
+            if (matchedPathname && currentPathname.startsWith(matchedPathname)) {
+                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;
+};
+/**
+ * Builds the matches array for RouteContext.
+ */
+const buildContextMatches = (parentMatches, combinedParams, routeMatch, routeInfoPathname, absolutePathnameBase, viewItem, routeElement, componentElement) => {
+    return [
+        ...parentMatches,
+        {
+            params: combinedParams,
+            pathname: 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) => {
+    const isIndexRoute = !!routeProps.index;
+    const patternPath = routeProps.path ?? '';
+    const pathnameBase = fullPathname === '' ? '/' : fullPathname;
+    const computedEnd = routeProps.end !== undefined ? routeProps.end : patternPath !== '' ? !patternPath.endsWith('*') : true;
+    return {
+        params: {},
+        pathname: isIndexRoute ? '' : fullPathname,
+        pathnameBase,
+        pattern: {
+            path: patternPath,
+            caseSensitive: routeProps.caseSensitive ?? false,
+            end: isIndexRoute ? true : computedEnd,
+        },
+    };
+};
+const computeRelativeToParent = (pathname, parentPath) => {
+    if (!parentPath)
+        return null;
+    const normalizedParent = normalizePathnameForComparison(parentPath);
+    const normalizedPathname = normalizePathnameForComparison(pathname);
+    if (normalizedPathname === normalizedParent) {
+        return '';
+    }
+    const withSlash = normalizedParent === '/' ? '/' : normalizedParent + '/';
+    if (normalizedPathname.startsWith(withSlash)) {
+        return normalizedPathname.slice(withSlash.length);
+    }
+    return null;
+};
+const resolveIndexRouteMatch = (viewItem, pathname, parentPath) => {
+    if (!viewItem.routeData?.childProps?.index) {
+        return null;
+    }
+    // Prefer computing against the parent path when available to align with RRv6 semantics
+    const relative = computeRelativeToParent(pathname, parentPath);
+    if (relative !== null) {
+        // Index routes match only when there is no remaining path
+        if (relative === '' || relative === '/') {
+            return createDefaultMatch(parentPath || pathname, viewItem.routeData.childProps);
+        }
+        return null;
+    }
+    // Fallback: use previously computed match base for equality check
+    const previousMatch = viewItem.routeData?.match;
+    if (!previousMatch) {
+        return null;
+    }
+    const normalizedPathname = normalizePathnameForComparison(pathname);
+    const normalizedBase = normalizePathnameForComparison(previousMatch.pathnameBase || previousMatch.pathname || '');
+    return normalizedPathname === normalizedBase ? previousMatch : null;
+};
 class ReactRouterViewStack extends ViewStacks {
+    /**
+     * 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.
+     */
+    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).
+     */
+    outletMountPaths = new Map();
     constructor() {
         super();
-        this.createViewItem = this.createViewItem.bind(this);
-        this.findViewItemByRouteInfo = this.findViewItemByRouteInfo.bind(this);
-        this.findLeavingViewItemByRouteInfo = this.findLeavingViewItemByRouteInfo.bind(this);
-        this.getChildrenToRender = this.getChildrenToRender.bind(this);
-        this.findViewItemByPathname = this.findViewItemByPathname.bind(this);
     }
-    createViewItem(outletId, reactElement, routeInfo, page) {
+    /**
+     * Creates a new view item for the given outlet and react route element.
+     * Associates route props with the matched route path for further lookups.
+     */
+    createViewItem = (outletId, reactElement, routeInfo, page) => {
+        const routePath = reactElement.props.path || '';
+        // Check if we already have a view item for this exact route that we can reuse
+        // Include wildcard routes like tabs/* since they should be reused
+        // Also check unmounted items that might have been preserved for browser navigation
+        const existingViewItem = this.getViewItemsForOutlet(outletId).find((v) => {
+            const existingRouteProps = v.reactElement?.props ?? {};
+            const existingPath = existingRouteProps.path || '';
+            const existingElement = existingRouteProps.element;
+            const newElement = reactElement.props.element;
+            const existingIsIndexRoute = !!existingRouteProps.index;
+            const newIsIndexRoute = !!reactElement.props.index;
+            // For Navigate components, match by destination
+            const existingIsNavigate = React.isValidElement(existingElement) && existingElement.type === Navigate;
+            const newIsNavigate = React.isValidElement(newElement) && newElement.type === Navigate;
+            if (existingIsNavigate && newIsNavigate) {
+                const existingTo = existingElement.props?.to;
+                const newTo = newElement.props?.to;
+                if (existingTo === newTo) {
+                    return true;
+                }
+            }
+            if (existingIsIndexRoute && newIsIndexRoute) {
+                return true;
+            }
+            // Reuse view items with the same path
+            // Special case: reuse tabs/* and other specific wildcard routes
+            // Don't reuse index routes (empty path) or generic catch-all wildcards (*)
+            if (existingPath === routePath && existingPath !== '' && existingPath !== '*') {
+                // Parameterized routes need pathname matching to ensure /details/1 and /details/2
+                // get separate view items. For wildcard routes (e.g., user/:userId/*), compare
+                // pathnameBase to allow child path changes while preserving the parent view.
+                const hasParams = routePath.includes(':');
+                const isWildcard = routePath.includes('*');
+                if (hasParams) {
+                    if (isWildcard) {
+                        const existingPathnameBase = v.routeData?.match?.pathnameBase;
+                        const newMatch = matchComponent$1(reactElement, routeInfo.pathname, false, this.outletParentPaths.get(outletId));
+                        const newPathnameBase = newMatch?.pathnameBase;
+                        if (existingPathnameBase !== newPathnameBase) {
+                            return false;
+                        }
+                    }
+                    else {
+                        const existingPathname = v.routeData?.match?.pathname;
+                        if (existingPathname !== routeInfo.pathname) {
+                            return false;
+                        }
+                    }
+                }
+                return true;
+            }
+            // Also reuse specific wildcard routes like tabs/*
+            if (existingPath === routePath && existingPath.endsWith('/*') && existingPath !== '/*') {
+                return true;
+            }
+            return false;
+        });
+        if (existingViewItem) {
+            // Update and ensure the existing view item is properly configured
+            existingViewItem.reactElement = reactElement;
+            existingViewItem.mount = true;
+            existingViewItem.ionPageElement = page || existingViewItem.ionPageElement;
+            const updatedMatch = matchComponent$1(reactElement, routeInfo.pathname, false, this.outletParentPaths.get(outletId)) ||
+                existingViewItem.routeData?.match ||
+                createDefaultMatch(routeInfo.pathname, reactElement.props);
+            existingViewItem.routeData = {
+                match: updatedMatch,
+                childProps: reactElement.props,
+                lastPathname: existingViewItem.routeData?.lastPathname, // Preserve navigation history
+            };
+            return existingViewItem;
+        }
+        const id = `${outletId}-${generateId(outletId)}`;
         const viewItem = {
-            id: generateId('viewItem'),
+            id,
             outletId,
             ionPageElement: page,
             reactElement,
             mount: true,
-            ionRoute: false,
+            ionRoute: true,
         };
         if (reactElement.type === IonRoute) {
-            viewItem.ionRoute = true;
             viewItem.disableIonPageManagement = reactElement.props.disableIonPageManagement;
         }
-        viewItem.routeData = {
-            match: matchPath({
-                pathname: routeInfo.pathname,
-                componentProps: reactElement.props,
-            }),
-            childProps: reactElement.props,
-        };
-        return viewItem;
+        const initialMatch = matchComponent$1(reactElement, routeInfo.pathname, true, this.outletParentPaths.get(outletId)) ||
+            createDefaultMatch(routeInfo.pathname, reactElement.props);
+        viewItem.routeData = {
+            match: initialMatch,
+            childProps: reactElement.props,
+        };
+        this.add(viewItem);
+        return viewItem;
+    };
+    /**
+     * Renders a ViewLifeCycleManager for the given view item.
+     * Handles cleanup if the view no longer matches.
+     *
+     * - Deactivates view if it no longer matches the current route
+     * - 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
+     */
+    renderViewItem = (viewItem, routeInfo, parentPath, reRender) => {
+        const routePath = viewItem.reactElement.props.path || '';
+        let match = matchComponent$1(viewItem.reactElement, routeInfo.pathname, false, parentPath);
+        if (!match) {
+            const indexMatch = resolveIndexRouteMatch(viewItem, routeInfo.pathname, parentPath);
+            if (indexMatch) {
+                match = indexMatch;
+            }
+        }
+        // For parameterized routes, check if this is a navigation to a different path instance
+        // In that case, we should NOT reuse this view - a new view should be created
+        const isParameterRoute = routePath.includes(':');
+        const previousMatch = viewItem.routeData?.match;
+        const isSamePath = match?.pathname === previousMatch?.pathname;
+        // Flag to indicate this view should not be reused for this different parameterized path
+        const shouldSkipForDifferentParam = isParameterRoute && match && previousMatch && !isSamePath;
+        // Don't deactivate views automatically - let the StackManager handle view lifecycle
+        // This preserves views in the stack for navigation history like native apps
+        // Views will be hidden/shown by the StackManager's transition logic instead of being unmounted
+        // Special handling for Navigate components - they should unmount after redirecting
+        const elementComponent = viewItem.reactElement?.props?.element;
+        const isNavigateComponent = isNavigateElement(elementComponent);
+        if (isNavigateComponent) {
+            // Navigate components should only be mounted when they match
+            // Once they redirect (no longer match), they should be removed completely
+            // IMPORTANT: For index routes, we need to check indexMatch too since matchComponent
+            // may not properly match index routes without explicit parent path context
+            const indexMatch = viewItem.routeData?.childProps?.index
+                ? resolveIndexRouteMatch(viewItem, routeInfo.pathname, parentPath)
+                : null;
+            const hasValidMatch = match || indexMatch;
+            if (!hasValidMatch && viewItem.mount) {
+                viewItem.mount = false;
+                // Schedule removal of the Navigate view item after a short delay
+                // This ensures the redirect completes before removal
+                setTimeout(() => {
+                    this.remove(viewItem);
+                    reRender?.();
+                }, NAVIGATE_REDIRECT_DELAY_MS);
+            }
+        }
+        // Components that don't have IonPage elements and no longer match should be cleaned up
+        // BUT we need to be careful not to remove them if they're part of browser navigation history
+        // This handles components that perform immediate actions like programmatic navigation
+        // EXCEPTION: Navigate components should ALWAYS remain mounted until they redirect
+        // since they need to be rendered to trigger the navigation
+        if (!match && viewItem.mount && !viewItem.ionPageElement && !isNavigateComponent) {
+            // Check if this view item should be preserved for browser navigation
+            // We'll keep it if it was recently active (within the last navigation)
+            const shouldPreserve = viewItem.routeData.lastPathname === routeInfo.pathname ||
+                viewItem.routeData.match?.pathname === routeInfo.lastPathname;
+            if (!shouldPreserve) {
+                // This view item doesn't match and doesn't have an IonPage
+                // It's likely a utility component that performs an action and navigates away
+                viewItem.mount = false;
+                // Schedule removal to allow it to be recreated on next navigation
+                setTimeout(() => {
+                    // Double-check before removing - the view might be needed again
+                    const stillNotNeeded = !viewItem.mount && !viewItem.ionPageElement;
+                    if (stillNotNeeded) {
+                        this.remove(viewItem);
+                        reRender?.();
+                    }
+                }, VIEW_CLEANUP_DELAY_MS);
+            }
+            else {
+                // Preserve it but unmount it for now
+                viewItem.mount = false;
+            }
+        }
+        // Reactivate view if it matches but was previously deactivated
+        // Don't reactivate if this is a parameterized route navigating to a different path instance
+        // 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 (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 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) => {
+                if (v.id === viewItem.id)
+                    return false; // Skip self
+                const vRoutePath = v.reactElement?.props?.path || '';
+                if (vRoutePath === '*' || vRoutePath === '')
+                    return false; // Skip other wildcard/empty routes
+                // 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) => {
+                            if (v.id === viewItem.id)
+                                return false;
+                            const vRoutePath = v.reactElement?.props?.path;
+                            return vRoutePath === '' || vRoutePath === undefined || !!v.routeData?.childProps?.index;
+                        });
+                        if (hasDefaultRoute) {
+                            hasSpecificMatch = true;
+                        }
+                    }
+                }
+            }
+            if (hasSpecificMatch) {
+                viewItem.mount = false;
+                if (viewItem.ionPageElement) {
+                    viewItem.ionPageElement.classList.add('ion-page-hidden');
+                    viewItem.ionPageElement.setAttribute('aria-hidden', 'true');
+                }
+            }
+        }
+        const routeElement = React.cloneElement(viewItem.reactElement);
+        const componentElement = routeElement.props.element;
+        // Don't update match for parameterized routes navigating to different path instances
+        // This preserves the original match so that findViewItemByPath can correctly skip this view
+        if (match && viewItem.routeData.match !== match && !shouldSkipForDifferentParam) {
+            viewItem.routeData.match = match;
+        }
+        const routeMatch = shouldSkipForDifferentParam ? viewItem.routeData?.match : match || viewItem.routeData?.match;
+        return (React.createElement(UNSAFE_RouteContext.Consumer, { key: `view-context-${viewItem.id}` }, (parentContext) => {
+            const parentMatches = (parentContext?.matches ?? []);
+            // Accumulate params from parent matches, with fallback to other outlets
+            let accumulatedParentParams = parentMatches.reduce((acc, m) => ({ ...acc, ...m.params }), {});
+            if (parentMatches.length === 0 && Object.keys(accumulatedParentParams).length === 0) {
+                accumulatedParentParams = getFallbackParamsFromViewItems(this.getAllViewItems(), viewItem.outletId, routeInfo.pathname);
+            }
+            const combinedParams = { ...accumulatedParentParams, ...(routeMatch?.params ?? {}) };
+            const parentPathnameBase = parentMatches.length > 0 ? parentMatches[parentMatches.length - 1].pathnameBase : '/';
+            const absolutePathnameBase = computeAbsolutePathnameBase(routeElement, routeMatch, parentPathnameBase, routeInfo.pathname);
+            const contextMatches = buildContextMatches(parentMatches, combinedParams, routeMatch, routeInfo.pathname, absolutePathnameBase, viewItem, routeElement, componentElement);
+            const routeContextValue = parentContext
+                ? { ...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)));
+        }));
+    };
+    /**
+     * Re-renders all active view items for the specified outlet.
+     * Ensures React elements are updated with the latest match.
+     *
+     * 1. Iterates through children of IonRouterOutlet
+     * 2. Updates each matching viewItem with the current child React element
+     *    (important for updating props or changes to elements)
+     * 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
+     */
+    getChildrenToRender = (outletId, ionRouterOutlet, routeInfo, reRender, parentPathnameBase) => {
+        const viewItems = this.getViewItemsForOutlet(outletId);
+        // 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 {
+            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 {
+            // 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);
+        }
+        // Re-sync each route element onto its stored viewItem so prop changes from a
+        // parent re-render reach the child. extractRouteChildren unwraps the <Routes>
+        // wrapper, which has no path of its own. Without it we'd iterate props.children
+        // directly, never match a viewItem, and the child's props would go stale.
+        extractRouteChildren(ionRouterOutlet.props.children).forEach((child) => {
+            // Match on exact path so a wildcard route doesn't overwrite a specific one.
+            const childPath = child.props.path;
+            const viewItem = viewItems.find((v) => {
+                const viewItemPath = v.reactElement?.props?.path;
+                return viewItemPath === childPath;
+            });
+            if (viewItem) {
+                viewItem.reactElement = child;
+            }
+        });
+        // Filter out duplicate view items by ID (but keep all mounted items)
+        const uniqueViewItems = viewItems.filter((viewItem, index, array) => {
+            // Remove duplicates by ID (keep first occurrence)
+            const isFirstOccurrence = array.findIndex((v) => v.id === viewItem.id) === index;
+            return isFirstOccurrence;
+        });
+        // Filter out unmounted Navigate components to prevent them from being rendered
+        // and triggering unwanted redirects
+        const renderableViewItems = uniqueViewItems.filter((viewItem) => {
+            const elementComponent = viewItem.reactElement?.props?.element;
+            const isNavigateComponent = isNavigateElement(elementComponent);
+            // Exclude unmounted Navigate components from rendering
+            if (isNavigateComponent && !viewItem.mount) {
+                return false;
+            }
+            // Filter out views that are unmounted, have no ionPageElement, and don't match the current route.
+            // These are "stale" views from previous routes that should not be rendered.
+            // Views WITH ionPageElement are handled by the normal lifecycle events.
+            // Views that MATCH the current route should be kept (they might be transitioning).
+            if (!viewItem.mount && !viewItem.ionPageElement) {
+                // Check if this view's route path matches the current pathname
+                const viewRoutePath = viewItem.reactElement?.props?.path;
+                if (viewRoutePath) {
+                    // First try exact match using matchComponent
+                    const routeMatch = matchComponent$1(viewItem.reactElement, routeInfo.pathname, false, parentPath);
+                    if (routeMatch) {
+                        // View matches current route, keep it
+                        return true;
+                    }
+                    // For parent routes (like /multiple-tabs or /routing), check if current pathname
+                    // starts with this route's path. This handles views with IonSplitPane/IonTabs
+                    // that don't have IonPage but should remain mounted while navigating within their children.
+                    const normalizedViewPath = normalizePathnameForComparison(viewRoutePath.replace(/\/?\*$/, '')); // Remove trailing wildcard
+                    const normalizedCurrentPath = normalizePathnameForComparison(routeInfo.pathname);
+                    // Check if current pathname is within this view's route hierarchy
+                    const isWithinRouteHierarchy = normalizedCurrentPath === normalizedViewPath || normalizedCurrentPath.startsWith(normalizedViewPath + '/');
+                    if (!isWithinRouteHierarchy) {
+                        // View is outside current route hierarchy, remove it
+                        setTimeout(() => {
+                            this.remove(viewItem);
+                            reRender();
+                        }, 0);
+                        return false;
+                    }
+                }
+            }
+            return true;
+        });
+        const renderedItems = renderableViewItems.map((viewItem) => this.renderViewItem(viewItem, routeInfo, parentPath, reRender));
+        return renderedItems;
+    };
+    /**
+     * Finds a view item matching the current route, optionally updating its match state.
+     */
+    findViewItemByRouteInfo = (routeInfo, outletId, updateMatch) => {
+        const { viewItem, match } = this.findViewItemByPath(routeInfo.pathname, outletId);
+        const shouldUpdateMatch = updateMatch === undefined || updateMatch === true;
+        if (shouldUpdateMatch && viewItem && match) {
+            viewItem.routeData.match = match;
+        }
+        return viewItem;
+    };
+    /**
+     * Finds the view item that was previously active before a route change.
+     */
+    findLeavingViewItemByRouteInfo = (routeInfo, outletId, mustBeIonRoute = true) => {
+        // If the lastPathname is not set, we cannot find a leaving view item
+        if (!routeInfo.lastPathname) {
+            return undefined;
+        }
+        const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname, outletId, mustBeIonRoute);
+        return viewItem;
+    };
+    /**
+     * Finds a view item by pathname only, used in simpler queries.
+     */
+    findViewItemByPathname = (pathname, outletId) => {
+        const { viewItem } = this.findViewItemByPath(pathname, outletId);
+        return viewItem;
+    };
+    /**
+     * Core function that matches a given pathname against all view items.
+     * Returns both the matched view item and match metadata.
+     */
+    findViewItemByPath(pathname, outletId, mustBeIonRoute, allowDefaultMatch = true) {
+        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);
+            if (!viewItem && allowDefaultMatch)
+                viewStack.some(matchDefaultRoute);
+        }
+        else {
+            const viewItems = sortViewsBySpecificity(this.getAllViewItems());
+            viewItems.some(matchView);
+            if (!viewItem && allowDefaultMatch)
+                viewItems.some(matchDefaultRoute);
+        }
+        // If we still have not found a view item for this outlet, try to find a matching
+        // view item across all outlets and adopt it into the current outlet. This helps
+        // recover when an outlet remounts and receives a new id, leaving views associated
+        // with the previous outlet id.
+        // Do not adopt across outlets; if we didn't find a view for this outlet,
+        // defer to route matching to create a new one.
+        return { viewItem, match };
+        /**
+         * Matches a route path with dynamic parameters (e.g. /tabs/:id)
+         */
+        function matchView(v) {
+            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 = v.routeData?.match;
+            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, 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;
+                const isSamePath = result.pathname === previousMatch?.pathname;
+                const isWildcardRoute = viewItemPath.includes('*');
+                const isParameterRoute = viewItemPath.includes(':');
+                // Don't allow view items with undefined paths to match specific routes
+                // This prevents broken index route view items from interfering with navigation
+                if (!viewItemPath && !isIndexRoute && pathname !== '/' && pathname !== '') {
+                    return false;
+                }
+                // For parameterized routes, check if we should reuse the view item.
+                // Wildcard routes (e.g., user/:userId/*) compare pathnameBase to allow
+                // child path changes while preserving the parent view.
+                if (isParameterRoute && !isSamePath) {
+                    if (isWildcardRoute) {
+                        const isSameBase = result.pathnameBase === previousMatch?.pathnameBase;
+                        if (isSameBase) {
+                            match = result;
+                            viewItem = v;
+                            return true;
+                        }
+                    }
+                    return false;
+                }
+                // For routes without params, or when navigating to the exact same path,
+                // or when there's no previous match, reuse the view item
+                if (!hasParams || isSamePath || !previousMatch) {
+                    match = result;
+                    viewItem = v;
+                    return true;
+                }
+                // For pure wildcard routes (without : params), compare pathnameBase to allow
+                // child path changes while preserving the parent view. This handles container
+                // routes like /tabs/* where switching between /tabs/tab1 and /tabs/tab2
+                // should reuse the same ViewItem.
+                if (isWildcardRoute && !isParameterRoute) {
+                    const isSameBase = result.pathnameBase === previousMatch?.pathnameBase;
+                    if (isSameBase) {
+                        match = result;
+                        viewItem = v;
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+        /**
+         * Matches a view with no path prop (default fallback route) or index route.
+         */
+        function matchDefaultRoute(v) {
+            const childProps = v.routeData.childProps;
+            const isDefaultRoute = childProps.path === undefined || childProps.path === '';
+            const isIndexRoute = !!childProps.index;
+            if (isIndexRoute) {
+                const outletParentPath = storedParentPaths.get(v.outletId);
+                const indexMatch = resolveIndexRouteMatch(v, pathname, outletParentPath);
+                if (indexMatch) {
+                    match = indexMatch;
+                    viewItem = v;
+                    return true;
+                }
+                return false;
+            }
+            // For empty path routes, only match if we're at the same level as when the view was created.
+            // This prevents an empty path view item from being reused for different routes.
+            if (isDefaultRoute) {
+                const previousPathnameBase = v.routeData?.match?.pathnameBase || '';
+                const normalizedBase = normalizePathnameForComparison(previousPathnameBase);
+                const normalizedPathname = normalizePathnameForComparison(pathname);
+                if (normalizedPathname !== normalizedBase) {
+                    return false;
+                }
+                match = {
+                    params: {},
+                    pathname,
+                    pathnameBase: pathname === '' ? '/' : pathname,
+                    pattern: {
+                        path: '',
+                        caseSensitive: childProps.caseSensitive ?? false,
+                        end: true,
+                    },
+                };
+                viewItem = v;
+                return true;
+            }
+            return false;
+        }
+    }
+    /**
+     * Clean up old, unmounted view items to prevent memory leaks
+     */
+    cleanupStaleViewItems = (outletId) => {
+        const viewItems = this.getViewItemsForOutlet(outletId);
+        // Keep only the most recent mounted views and a few unmounted ones for history
+        const maxUnmountedItems = 3;
+        const unmountedItems = viewItems.filter((v) => !v.mount);
+        if (unmountedItems.length > maxUnmountedItems) {
+            // Remove oldest unmounted items
+            const itemsToRemove = unmountedItems.slice(0, unmountedItems.length - maxUnmountedItems);
+            itemsToRemove.forEach((item) => {
+                this.remove(item);
+            });
+        }
+    };
+    /**
+     * Override add to prevent duplicate view items with the same ID in the same outlet
+     * But allow multiple view items for the same route path (for navigation history)
+     */
+    add = (viewItem) => {
+        const existingViewItem = this.getViewItemsForOutlet(viewItem.outletId).find((v) => v.id === viewItem.id);
+        if (existingViewItem) {
+            return;
+        }
+        super.add(viewItem);
+        this.cleanupStaleViewItems(viewItem.outletId);
+    };
+    /**
+     * Override clear to also clean up the stored parent path for the outlet.
+     */
+    clear = (outletId) => {
+        this.outletParentPaths.delete(outletId);
+        this.outletMountPaths.delete(outletId);
+        return super.clear(outletId);
+    };
+    /**
+     * Override remove
+     */
+    remove = (viewItem) => {
+        super.remove(viewItem);
+    };
+}
+/**
+ * Utility to apply matchPath to a React element and return its match state.
+ */
+function matchComponent$1(node, pathname, allowFallback = false, parentPath) {
+    const routeProps = node?.props ?? {};
+    const routePath = routeProps.path;
+    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,
+    });
+    if (match || !allowFallback) {
+        return match;
+    }
+    const isIndexRoute = !!routeProps.index;
+    if (isIndexRoute) {
+        return createDefaultMatch(pathname, routeProps);
+    }
+    if (!routePath || routePath === '') {
+        return createDefaultMatch(pathname, routeProps);
+    }
+    return null;
+}
+
+function clonePageElement(leavingViewHtml) {
+    let html;
+    if (typeof leavingViewHtml === 'string') {
+        html = leavingViewHtml;
+    }
+    else {
+        html = leavingViewHtml.outerHTML;
+    }
+    if (document) {
+        const newEl = document.createElement('div');
+        newEl.innerHTML = html;
+        newEl.style.zIndex = '';
+        // Remove an existing back button so the new element doesn't get two of them
+        const ionBackButton = newEl.getElementsByTagName('ion-back-button');
+        if (ionBackButton[0]) {
+            ionBackButton[0].remove();
+        }
+        return newEl.firstChild;
+    }
+    return undefined;
+}
+
+/**
+ * `StackManager` is responsible for managing page transitions, keeping track
+ * of views (pages), and ensuring that navigation behaves like native apps —
+ * particularly with animations and swipe gestures.
+ */
+/**
+ * Delay in milliseconds before unmounting a view after a transition completes.
+ * This ensures the page transition animation finishes before the view is removed.
+ */
+const VIEW_UNMOUNT_DELAY_MS = 250;
+/**
+ * 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 = 300;
+/** Off unless the app sets `logLevel: 'DEBUG'`. */
+const debug = createDebugLogger('react-router');
+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');
+        element.setAttribute('aria-hidden', 'true');
+    }
+};
+const showIonPageElement = (element) => {
+    if (element) {
+        element.style.removeProperty('visibility');
+        // core transitions (md.transition.ts, ios.transition.ts) leave inline styles
+        // on the leaving page after animation: `display: none` plus the final
+        // keyframe values for `transform` and `opacity` (MD only). Preserved views
+        // must clear all of these on re-entry so they render in the correct
+        // position when the back direction entering animation is a no-op.
+        element.style.removeProperty('display');
+        element.style.removeProperty('transform');
+        element.style.removeProperty('opacity');
+        element.classList.remove('ion-page-hidden');
+        element.removeAttribute('aria-hidden');
+    }
+};
+/**
+ * Variant of `showIonPageElement` for the swipe-back gesture start. Clears
+ * `display: none` and the hidden class/attribute so the entering view is
+ * visible, but intentionally keeps any inline `transform` and `opacity` set
+ * by core's prior forward transition. The gesture's progress animation starts
+ * from that pose, so clearing them here would cause a visible jump before
+ * core's progress animation takes over.
+ */
+const revealIonPageForSwipeBack = (element) => {
+    if (element) {
+        element.style.removeProperty('display');
+        element.classList.remove('ion-page-hidden');
+        element.removeAttribute('aria-hidden');
+    }
+};
+/**
+ * A leaf view is "preservable" on browser-back (pop) when its React state
+ * should survive a forward-pop round-trip. Non-parameterized leaf paths
+ * resolve to the same view item on re-entry, so keeping them mounted retains
+ * user-visible state (scroll, inputs, cleared lists, etc.).
+ *
+ * Excluded:
+ * - Parameterized routes (`/users/:id`): each param value gets a distinct
+ *   view item, so preserving them accumulates hidden views in the DOM.
+ * - Wildcard container routes (`/tabs/*`, `*`): wrap nested outlets and must
+ *   be destroyed so nested outlet state rebuilds cleanly on re-entry.
+ */
+const isViewItemPreservableOnPop = (viewItem) => {
+    const path = viewItem?.reactElement?.props?.path;
+    if (!path) {
+        return false;
+    }
+    if (path === '*' || path.endsWith('/*')) {
+        return false;
+    }
+    return !path.includes(':');
+};
+class StackManager extends React.PureComponent {
+    id; // Unique id for the router outlet aka outletId
+    ionRouterOutlet;
+    routerOutletElement;
+    prevProps;
+    skipTransition;
+    stackContextValue = {
+        registerIonPage: this.registerIonPage.bind(this),
+        isInOutlet: () => true,
+    };
+    pendingPageTransition = false;
+    waitingForIonPage = false;
+    ionPageWaitTimeout;
+    outOfScopeUnmountTimeout;
+    /** Whether this outlet was previously in scope. */
+    wasInScope = true;
+    /**
+     * Track the last transition's entering and leaving view IDs to prevent
+     * duplicate transitions during rapid navigation (e.g., Navigate redirects)
+     */
+    lastTransition;
+    /**
+     * Views that have been explicitly kept alive by the pop-preserve logic
+     * (shouldPreserveLeavingView) so a future forward-pop can restore their React
+     * state. These are candidates for cleanup when a fresh push invalidates the
+     * forward-history path that made them reachable. Views mounted through
+     * normal forward-push (which keeps the leaving view alive by default) are
+     * NOT tracked here.
+     */
+    preservedViewItems = new Set();
+    /** Tracks whether the component is mounted to guard async transition paths. */
+    _isMounted = false;
+    /** In-flight requestAnimationFrame IDs from transitionPage, cancelled on unmount. */
+    transitionRafIds = [];
+    /** In-flight MutationObserver from waitForComponentsReady, disconnected on unmount. */
+    transitionObserver;
+    /**
+     * Monotonically increasing counter incremented at the start of each transitionPage call.
+     * Used to detect when an async commit() resolves after a newer transition has already run,
+     * preventing the stale commit from hiding an element that the newer transition made visible.
+     */
+    transitionGeneration = 0;
+    /**
+     * The entering element of the most recent transitionPage call.
+     * Used alongside transitionGeneration to undo incorrect ion-page-hidden applied
+     * by a stale animated commit that raced with a newer non-animated transition.
+     */
+    transitionEnteringElement;
+    constructor(props) {
+        super(props);
+        this.registerIonPage = this.registerIonPage.bind(this);
+        this.transitionPage = this.transitionPage.bind(this);
+        this.handlePageTransition = this.handlePageTransition.bind(this);
+        this.id = props.id || `routerOutlet-${generateId('routerOutlet')}`;
+        this.prevProps = undefined;
+        this.skipTransition = false;
+    }
+    outletMountPath = undefined;
+    /**
+     * Whether this outlet is at the root level (no parent route matches).
+     * Derived from UNSAFE_RouteContext in render() — empty matches means root.
+     */
+    isRootOutlet = true;
+    /**
+     * Determines the parent path for nested routing in React Router 6.
+     *
+     * 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.
+        // 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);
+            if (!this.isRootOutlet || hasRelativeRoutes || hasIndexRoute) {
+                const result = computeParentPath({
+                    currentPathname,
+                    outletMountPath: this.outletMountPath,
+                    routeChildren,
+                    hasRelativeRoutes,
+                    hasIndexRoute,
+                    hasWildcardRoute,
+                });
+                if (result.outletMountPath && !this.outletMountPath) {
+                    this.outletMountPath = result.outletMountPath;
+                }
+                return result.parentPath;
+            }
+        }
+        return this.outletMountPath;
+    }
+    /**
+     * Finds the entering and leaving view items, handling redirect cases.
+     */
+    findViewItems(routeInfo) {
+        const enteringViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id);
+        let leavingViewItem = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id);
+        // Try to find leaving view by previous pathname
+        if (!leavingViewItem && routeInfo.prevRouteLastPathname) {
+            leavingViewItem = this.context.findViewItemByPathname(routeInfo.prevRouteLastPathname, this.id);
+        }
+        // For redirects where entering === leaving, find the actual previous view
+        if (enteringViewItem &&
+            leavingViewItem &&
+            enteringViewItem === leavingViewItem &&
+            routeInfo.routeAction === 'replace' &&
+            routeInfo.prevRouteLastPathname) {
+            const actualLeavingView = this.context.findViewItemByPathname(routeInfo.prevRouteLastPathname, this.id);
+            if (actualLeavingView && actualLeavingView !== enteringViewItem) {
+                leavingViewItem = actualLeavingView;
+            }
+        }
+        // Handle redirect scenario with no leaving view
+        if (enteringViewItem &&
+            !leavingViewItem &&
+            routeInfo.routeAction === 'replace' &&
+            routeInfo.prevRouteLastPathname) {
+            const actualLeavingView = this.context.findViewItemByPathname(routeInfo.prevRouteLastPathname, this.id);
+            if (actualLeavingView && actualLeavingView !== enteringViewItem) {
+                leavingViewItem = actualLeavingView;
+            }
+        }
+        return { enteringViewItem, leavingViewItem };
+    }
+    shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem) {
+        if (!leavingViewItem) {
+            return false;
+        }
+        if (routeInfo.routeAction === 'replace') {
+            const leavingRoutePath = leavingViewItem?.reactElement?.props?.path;
+            // Never unmount root path or views without a path - needed for back navigation
+            if (!leavingRoutePath || leavingRoutePath === '/' || leavingRoutePath === '') {
+                return false;
+            }
+            // Replace actions unmount the leaving view since it's being replaced in history.
+            return true;
+        }
+        // For non-replace actions, only unmount for back navigation
+        const isForwardPush = routeInfo.routeAction === 'push' && routeInfo.routeDirection === 'forward';
+        if (!isForwardPush && routeInfo.routeDirection !== 'none' && enteringViewItem !== leavingViewItem) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Handles out-of-scope outlet. Returns true if transition should be aborted.
+     */
+    handleOutOfScopeOutlet(routeInfo) {
+        if (!this.outletMountPath || isPathnameInScope(routeInfo.pathname, this.outletMountPath)) {
+            this.wasInScope = true;
+            // Cancel any pending deferred unmount from a previous out-of-scope transition.
+            if (this.outOfScopeUnmountTimeout) {
+                clearTimeout(this.outOfScopeUnmountTimeout);
+                this.outOfScopeUnmountTimeout = undefined;
+            }
+            return false;
+        }
+        // Only run the out-of-scope cleanup on the first transition out of scope.
+        // When parameterized routes create multiple StackManager instances with the
+        // same outlet ID, a stale (hidden) instance must not destroy views that an
+        // active instance just created. After the initial cleanup, the stale instance
+        // stays dormant until its mount path becomes in-scope again.
+        if (!this.wasInScope) {
+            return true;
+        }
+        this.wasInScope = false;
+        // For ionPage outlets whose parent outlet has swipe-to-go-back enabled,
+        // preserve child views so they remain visible during the swipe gesture.
+        // Without this, the deferred unmount removes child pages before the gesture
+        // starts, showing an empty shell when swiping back. Views are cleaned up
+        // when the parent outlet pops this view (componentWillUnmount -> clearOutlet).
+        //
+        // Lifecycle events are skipped in this branch because the view stays mounted
+        // and visible. Firing ionViewWillLeave/DidLeave here would be asymmetric with
+        // no matching ionViewWillEnter/DidEnter when the view comes back in scope.
+        const isIonPageOutlet = this.routerOutletElement?.classList.contains('ion-page');
+        if (isIonPageOutlet) {
+            const parentOutlet = this.routerOutletElement?.parentElement?.closest('ion-router-outlet');
+            if (parentOutlet?.swipeGesture === true) {
+                this.dismissPresentedOverlays();
+                return true;
+            }
+        }
+        // Fire lifecycle events on any visible view before unmounting.
+        // When navigating away from a tabbed section, the parent outlet fires
+        // ionViewDidLeave on the tabs container, but the active tab child page
+        // never receives its own lifecycle events because the core transition
+        // dispatches events with bubbles:false. This ensures tab child pages
+        // get ionViewWillLeave/ionViewDidLeave so useIonViewDidLeave fires.
+        const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
+        allViewsInOutlet.forEach((viewItem) => {
+            if (viewItem.ionPageElement && isViewVisible(viewItem.ionPageElement)) {
+                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewWillLeave', { bubbles: false, cancelable: false }));
+                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewDidLeave', { bubbles: false, cancelable: false }));
+            }
+        });
+        // Defer removal of view items to allow the parent outlet's leaving-page
+        // animation to complete with content still visible. When the nested outlet
+        // unmounts views immediately, React removes the child DOM elements before
+        // the parent's transition animation can render them. On MD mode the back
+        // animation only animates the leaving page (slide down + fade), so an
+        // empty shell is invisible and the transition appears instant.
+        //
+        // VIEW_UNMOUNT_DELAY_MS exceeds the MD back transition (200ms).
+        this.outOfScopeUnmountTimeout = setTimeout(() => {
+            if (!this._isMounted)
+                return;
+            allViewsInOutlet.forEach((viewItem) => {
+                this.context.unMountViewItem(viewItem);
+            });
+            this.forceUpdate();
+        }, VIEW_UNMOUNT_DELAY_MS);
+        return true;
+    }
+    /**
+     * Handles root navigation by unmounting all non-entering views in this outlet.
+     * Fires ionViewWillLeave / ionViewDidLeave only on views that are currently visible.
+     * Views that are mounted but not visible (e.g., pages earlier in the back stack)
+     * are silently unmounted without lifecycle events, consistent with the behavior
+     * of out-of-scope outlet cleanup.
+     */
+    handleRootNavigation(enteringViewItem) {
+        const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
+        allViewsInOutlet.forEach((viewItem) => {
+            if (viewItem === enteringViewItem) {
+                return;
+            }
+            if (viewItem.ionPageElement && isViewVisible(viewItem.ionPageElement)) {
+                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewWillLeave', { bubbles: false, cancelable: false }));
+                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewDidLeave', { bubbles: false, cancelable: false }));
+            }
+            this.context.unMountViewItem(viewItem);
+        });
+    }
+    /**
+     * Handles nested outlet with relative routes but no parent path. Returns true to abort.
+     */
+    handleOutOfContextNestedOutlet(parentPath, leavingViewItem) {
+        if (this.isRootOutlet || parentPath !== undefined || !this.ionRouterOutlet) {
+            return false;
+        }
+        const routesChildren = getRoutesChildren(this.ionRouterOutlet.props.children) ?? this.ionRouterOutlet.props.children;
+        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 !== '*';
+        });
+        if (hasRelativeRoutes) {
+            hideIonPageElement(leavingViewItem?.ionPageElement);
+            if (leavingViewItem) {
+                leavingViewItem.mount = false;
+            }
+            this.forceUpdate();
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Handles nested outlet with no matching route. Returns true to abort.
+     */
+    handleNoMatchingRoute(enteringRoute, enteringViewItem, leavingViewItem) {
+        if (this.isRootOutlet || enteringRoute || enteringViewItem) {
+            return false;
+        }
+        hideIonPageElement(leavingViewItem?.ionPageElement);
+        if (leavingViewItem) {
+            leavingViewItem.mount = false;
+        }
+        this.forceUpdate();
+        return true;
+    }
+    /**
+     * Handles transition when entering view has ion-page element ready.
+     */
+    handleReadyEnteringView(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem) {
+        const routePath = enteringViewItem.reactElement?.props?.path;
+        const isParameterizedRoute = routePath ? routePath.includes(':') : false;
+        const isWildcardContainerRoute = routePath ? routePath.endsWith('/*') : false;
+        // Handle same-view transitions (parameterized routes like /user/:id or container routes like /tabs/*)
+        // 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, this.outletMountPath);
+                if (updatedMatch) {
+                    enteringViewItem.routeData.match = updatedMatch;
+                }
+                const enteringEl = enteringViewItem.ionPageElement;
+                if (enteringEl) {
+                    showIonPageElement(enteringEl);
+                    enteringEl.classList.remove('ion-page-invisible');
+                    // Maintain can-go-back state since we skip transitionPage/commit.
+                    // Without this, the back button disappears on re-navigation to a
+                    // parameterized route within a nested outlet (e.g. welcome -> item -> back -> item).
+                    if (routeInfo.pushedByRoute) {
+                        enteringEl.classList.add('can-go-back');
+                    }
+                    else {
+                        enteringEl.classList.remove('can-go-back');
+                    }
+                }
+                this.forceUpdate();
+                return;
+            }
+        }
+        // For wildcard container routes, check if we're navigating within the same container.
+        // If both the current pathname and the previous pathname match the same container route,
+        // skip the transition - the nested outlet will handle the actual page change.
+        // This handles cases where leavingViewItem lookup fails (e.g., no IonPage wrapper).
+        if (isWildcardContainerRoute && routeInfo.lastPathname) {
+            // routePath is guaranteed to exist since isWildcardContainerRoute checks routePath?.endsWith('/*')
+            const containerBase = routePath.replace(/\/\*$/, '');
+            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, this.outletMountPath);
+                if (updatedMatch) {
+                    enteringViewItem.routeData.match = updatedMatch;
+                }
+                this.forceUpdate();
+                return;
+            }
+        }
+        if (!leavingViewItem && this.props.routeInfo.prevRouteLastPathname) {
+            leavingViewItem = this.context.findViewItemByPathname(this.props.routeInfo.prevRouteLastPathname, this.id);
+        }
+        // Re-mount views that were previously unmounted (e.g., navigating back to home)
+        if (!enteringViewItem.mount) {
+            enteringViewItem.mount = true;
+        }
+        // A view that becomes the entering view is no longer a stale preserved view.
+        // It's back in the active navigation path, so drop it from the cleanup set.
+        this.preservedViewItems.delete(enteringViewItem);
+        // Check visibility state BEFORE showing entering view
+        const enteringWasVisible = enteringViewItem.ionPageElement && isViewVisible(enteringViewItem.ionPageElement);
+        const leavingIsHidden = leavingViewItem !== undefined && leavingViewItem.ionPageElement && !isViewVisible(leavingViewItem.ionPageElement);
+        const currentTransition = {
+            enteringId: enteringViewItem.id,
+            leavingId: leavingViewItem?.id,
+        };
+        const isDuplicateTransition = leavingViewItem &&
+            this.lastTransition &&
+            this.lastTransition.leavingId &&
+            this.lastTransition.enteringId === currentTransition.enteringId &&
+            this.lastTransition.leavingId === currentTransition.leavingId;
+        // Skip if transition already performed (e.g., via swipe gesture)
+        if (enteringWasVisible && leavingIsHidden && isDuplicateTransition) {
+            if (this.skipTransition &&
+                shouldUnmountLeavingViewItem &&
+                leavingViewItem &&
+                enteringViewItem !== leavingViewItem) {
+                leavingViewItem.mount = false;
+                // Trigger ionViewDidLeave lifecycle for ViewLifeCycleManager cleanup
+                this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back');
+            }
+            this.skipTransition = false;
+            this.forceUpdate();
+            return;
+        }
+        showIonPageElement(enteringViewItem.ionPageElement);
+        // Handle duplicate transition or swipe gesture completion
+        if (isDuplicateTransition || this.skipTransition) {
+            if (this.skipTransition &&
+                shouldUnmountLeavingViewItem &&
+                leavingViewItem &&
+                enteringViewItem !== leavingViewItem) {
+                leavingViewItem.mount = false;
+                // Re-fire ionViewDidLeave since gesture completed before mount=false was set
+                this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back');
+            }
+            this.skipTransition = false;
+            this.forceUpdate();
+            return;
+        }
+        this.lastTransition = currentTransition;
+        const shouldSkipAnimation = this.applySkipAnimationIfNeeded(enteringViewItem, leavingViewItem);
+        this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, undefined, false, shouldSkipAnimation);
+        if (shouldUnmountLeavingViewItem && leavingViewItem && enteringViewItem !== leavingViewItem) {
+            // For replace actions, skip setting mount=false here. handleLeavingViewUnmount
+            // sets it only after its container-to-container guard passes, avoiding zombie state.
+            //
+            // For pop (browser back) on preservable routes (see isViewItemPreservableOnPop),
+            // keep the view alive (hidden by the transition) so its React state survives a
+            // forward-pop round-trip. ionViewDidLeave already fired via the transitionPage()
+            // call above. Swipe-to-go-back still destroys views through the skipTransition
+            // path earlier in this method, matching native gesture behavior.
+            //
+            // handleLeavingViewUnmount below is a no-op for non-replace actions (early return),
+            // so pop-preserved views pass through it untouched.
+            const shouldPreserveLeavingView = routeInfo.routeAction === 'pop' && isViewItemPreservableOnPop(leavingViewItem);
+            if (routeInfo.routeAction !== 'replace' && !shouldPreserveLeavingView) {
+                leavingViewItem.mount = false;
+            }
+            else if (shouldPreserveLeavingView) {
+                this.preservedViewItems.add(leavingViewItem);
+            }
+            this.handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem);
+        }
+        // Clean up orphaned sibling views after replace actions (redirects)
+        this.cleanupOrphanedSiblingViews(routeInfo, enteringViewItem, leavingViewItem);
+        // On a fresh push, browser forward history is invalidated. Any views we
+        // previously preserved on pop (to support forward navigation) are now
+        // unreachable and should be unmounted so they don't accumulate in the DOM.
+        this.cleanupPreservedViewsOnPush(routeInfo, enteringViewItem, leavingViewItem);
+    }
+    /**
+     * Unmounts views previously kept alive by the pop-preserve logic when a fresh
+     * push invalidates the forward-history path that made them reachable. Only
+     * iterates views explicitly tracked in `preservedViewItems` so that views
+     * naturally mounted through forward-push (the default leaving-view behavior)
+     * are left untouched.
+     */
+    cleanupPreservedViewsOnPush(routeInfo, enteringViewItem, leavingViewItem) {
+        if (routeInfo.routeAction !== 'push') {
+            return;
+        }
+        if (this.preservedViewItems.size === 0) {
+            return;
+        }
+        for (const viewItem of Array.from(this.preservedViewItems)) {
+            if (viewItem === enteringViewItem || viewItem === leavingViewItem) {
+                this.preservedViewItems.delete(viewItem);
+                continue;
+            }
+            if (!viewItem.mount) {
+                this.preservedViewItems.delete(viewItem);
+                continue;
+            }
+            viewItem.mount = false;
+            this.preservedViewItems.delete(viewItem);
+            const viewToUnmount = viewItem;
+            setTimeout(() => {
+                // Skip if a follow-up transition re-entered the view (mount flipped back to true).
+                if (viewToUnmount.mount) {
+                    return;
+                }
+                this.context.unMountViewItem(viewToUnmount);
+                this.forceUpdate();
+            }, VIEW_UNMOUNT_DELAY_MS);
+        }
     }
-    getChildrenToRender(outletId, ionRouterOutlet, routeInfo) {
-        const viewItems = this.getViewItemsForOutlet(outletId);
-        // Sync latest routes with viewItems
-        React.Children.forEach(ionRouterOutlet.props.children, (child) => {
-            const viewItem = viewItems.find((v) => {
-                return matchComponent$1(child, v.routeData.childProps.path || v.routeData.childProps.from);
-            });
-            if (viewItem) {
-                viewItem.reactElement = child;
+    /**
+     * Handles leaving view unmount for replace actions.
+     */
+    handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem) {
+        // Only replace actions unmount views; push/pop cache for navigation history
+        if (routeInfo.routeAction !== 'replace') {
+            return;
+        }
+        if (!leavingViewItem.ionPageElement) {
+            leavingViewItem.mount = false;
+            const viewToUnmount = leavingViewItem;
+            setTimeout(() => {
+                // Skip if a follow-up transition re-entered the view (mount flipped back to true).
+                if (viewToUnmount.mount) {
+                    return;
+                }
+                this.context.unMountViewItem(viewToUnmount);
+                this.forceUpdate();
+            }, VIEW_UNMOUNT_DELAY_MS);
+            return;
+        }
+        const enteringRoutePath = enteringViewItem.reactElement?.props?.path;
+        const leavingRoutePath = leavingViewItem.reactElement?.props?.path;
+        const isEnteringContainerRoute = enteringRoutePath && enteringRoutePath.endsWith('/*');
+        const isLeavingSpecificRoute = leavingRoutePath &&
+            leavingRoutePath !== '' &&
+            leavingRoutePath !== '*' &&
+            !leavingRoutePath.endsWith('/*') &&
+            !leavingViewItem.reactElement?.props?.index;
+        // 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;
+        }
+        leavingViewItem.mount = false;
+        const viewToUnmount = leavingViewItem;
+        setTimeout(() => {
+            // Skip if a follow-up transition re-entered the view (mount flipped back to true).
+            if (viewToUnmount.mount) {
+                return;
             }
-        });
-        const children = viewItems.map((viewItem) => {
-            let clonedChild;
-            if (viewItem.ionRoute && !viewItem.disableIonPageManagement) {
-                clonedChild = (React.createElement(ViewLifeCycleManager, { key: `view-${viewItem.id}`, mount: viewItem.mount, removeView: () => this.remove(viewItem) }, React.cloneElement(viewItem.reactElement, {
-                    computedMatch: viewItem.routeData.match,
-                })));
+            this.context.unMountViewItem(viewToUnmount);
+            this.forceUpdate();
+        }, VIEW_UNMOUNT_DELAY_MS);
+    }
+    /**
+     * Cleans up orphaned sibling views after replace actions or push-to-container navigations.
+     */
+    cleanupOrphanedSiblingViews(routeInfo, enteringViewItem, leavingViewItem) {
+        const enteringRoutePath = enteringViewItem.reactElement?.props?.path;
+        if (!enteringRoutePath) {
+            return;
+        }
+        const leavingRoutePath = leavingViewItem?.reactElement?.props?.path;
+        const isContainerRoute = (path) => path?.endsWith('/*');
+        const isReplaceAction = routeInfo.routeAction === 'replace';
+        const isPushToContainer = routeInfo.routeAction === 'push' && routeInfo.routeDirection === 'none' && isContainerRoute(enteringRoutePath);
+        if (!isReplaceAction && !isPushToContainer) {
+            return;
+        }
+        // Skip cleanup for tab switches
+        const isSameView = enteringViewItem === leavingViewItem;
+        const isSameContainerRoute = isContainerRoute(enteringRoutePath) && leavingRoutePath === enteringRoutePath;
+        const isNavigatingWithinContainer = isPushToContainer &&
+            !leavingViewItem &&
+            routeInfo.prevRouteLastPathname?.startsWith(enteringRoutePath.replace(/\/\*$/, ''));
+        if (isSameView || isSameContainerRoute || isNavigatingWithinContainer) {
+            return;
+        }
+        const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
+        const areSiblingRoutes = (path1, path2) => {
+            const path1IsRelative = !path1.startsWith('/');
+            const path2IsRelative = !path2.startsWith('/');
+            if (path1IsRelative && path2IsRelative) {
+                const path1Depth = path1.replace(/\/\*$/, '').split('/').filter(Boolean).length;
+                const path2Depth = path2.replace(/\/\*$/, '').split('/').filter(Boolean).length;
+                return path1Depth === path2Depth && path1Depth <= 1;
             }
-            else {
-                const match = matchComponent$1(viewItem.reactElement, routeInfo.pathname);
-                clonedChild = (React.createElement(ViewLifeCycleManager, { key: `view-${viewItem.id}`, mount: viewItem.mount, removeView: () => this.remove(viewItem) }, React.cloneElement(viewItem.reactElement, {
-                    computedMatch: viewItem.routeData.match,
-                })));
-                if (!match && viewItem.routeData.match) {
-                    viewItem.routeData.match = undefined;
-                    viewItem.mount = false;
+            const getParent = (path) => {
+                const normalized = path.replace(/\/\*$/, '');
+                const segments = normalized.split('/').filter(Boolean);
+                // Strip trailing parameter segments (e.g., :id) so that
+                // sibling routes like /items/list/:id and /items/detail/:id
+                // resolve to the same parent (/items).
+                while (segments.length > 0 && segments[segments.length - 1].startsWith(':')) {
+                    segments.pop();
                 }
+                segments.pop();
+                return segments.length > 0 ? '/' + segments.join('/') : '/';
+            };
+            const parent = getParent(path1);
+            // Exclude root-level routes from sibling detection to avoid unintended
+            // cleanup of unrelated top-level routes. Also covers single-depth param
+            // routes (e.g., /items/:id) which resolve to root after param stripping.
+            if (parent === '/') {
+                return false;
+            }
+            return parent === getParent(path2);
+        };
+        for (const viewItem of allViewsInOutlet) {
+            const viewRoutePath = viewItem.reactElement?.props?.path;
+            const shouldSkip = viewItem.id === enteringViewItem.id ||
+                (leavingViewItem && viewItem.id === leavingViewItem.id) ||
+                !viewItem.mount ||
+                !viewRoutePath ||
+                // Don't clean up container routes when entering a container route
+                // (e.g., /tabs/* and /settings/* coexist for tab switching)
+                (viewRoutePath.endsWith('/*') && enteringRoutePath.endsWith('/*'));
+            if (shouldSkip) {
+                continue;
+            }
+            const isOrphanedSpecificRoute = !viewRoutePath.endsWith('/*');
+            // Clean up sibling non-container routes that are no longer reachable.
+            let shouldCleanup = false;
+            if ((isReplaceAction || isPushToContainer) && isOrphanedSpecificRoute) {
+                shouldCleanup = areSiblingRoutes(enteringRoutePath, viewRoutePath);
+            }
+            if (shouldCleanup) {
+                hideIonPageElement(viewItem.ionPageElement);
+                viewItem.mount = false;
+                const viewToRemove = viewItem;
+                setTimeout(() => {
+                    // Skip if a follow-up transition re-entered the view (mount flipped back to true).
+                    if (viewToRemove.mount) {
+                        return;
+                    }
+                    this.context.unMountViewItem(viewToRemove);
+                    this.forceUpdate();
+                }, VIEW_UNMOUNT_DELAY_MS);
             }
-            return clonedChild;
-        });
-        return children;
-    }
-    findViewItemByRouteInfo(routeInfo, outletId, updateMatch) {
-        const { viewItem, match } = this.findViewItemByPath(routeInfo.pathname, outletId);
-        const shouldUpdateMatch = updateMatch === undefined || updateMatch === true;
-        if (shouldUpdateMatch && viewItem && match) {
-            viewItem.routeData.match = match;
         }
-        return viewItem;
-    }
-    findLeavingViewItemByRouteInfo(routeInfo, outletId, mustBeIonRoute = true) {
-        const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname, outletId, mustBeIonRoute);
-        return viewItem;
-    }
-    findViewItemByPathname(pathname, outletId) {
-        const { viewItem } = this.findViewItemByPath(pathname, outletId);
-        return viewItem;
     }
     /**
-     * Returns the matching view item and the match result for a given pathname.
+     * Determines whether to skip the transition animation and, if so, immediately
+     * hides the leaving view with inline `visibility:hidden`.
+     *
+     * Skips transitions only for outlets nested inside a parent IonPage's content
+     * area (i.e., an ion-content sits between the outlet and the .ion-page). These
+     * outlets render child pages inside a parent page's scrollable area, and the MD
+     * animation shows both entering and leaving pages simultaneously — causing text
+     * overlap and nested scrollbars. Standard page-level outlets (tabs, routing,
+     * swipe-to-go-back) animate normally even though they sit inside a framework-
+     * managed .ion-page wrapper from the parent outlet's view stack.
+     *
+     * 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.
      */
-    findViewItemByPath(pathname, outletId, mustBeIonRoute) {
-        let viewItem;
-        let match;
-        let viewStack;
-        if (outletId) {
-            viewStack = this.getViewItemsForOutlet(outletId);
-            viewStack.some(matchView);
-            if (!viewItem) {
-                viewStack.some(matchDefaultRoute);
+    applySkipAnimationIfNeeded(enteringViewItem, leavingViewItem) {
+        // Only skip for outlets genuinely nested inside a page's content area.
+        // Walk from the outlet up to the nearest .ion-page; if an ion-content
+        // sits in between, the outlet is inside scrollable page content and
+        // animating would cause overlapping pages with duplicate scrollbars.
+        let isInsidePageContent = false;
+        let el = this.routerOutletElement?.parentElement ?? null;
+        while (el) {
+            if (el.classList.contains('ion-page'))
+                break;
+            if (el.tagName === 'ION-CONTENT') {
+                isInsidePageContent = true;
+                break;
             }
+            el = el.parentElement;
         }
-        else {
-            const viewItems = this.getAllViewItems();
-            viewItems.some(matchView);
-            if (!viewItem) {
-                viewItems.some(matchDefaultRoute);
-            }
+        const shouldSkip = isInsidePageContent && !!leavingViewItem && enteringViewItem !== leavingViewItem;
+        if (shouldSkip && leavingViewItem?.ionPageElement) {
+            leavingViewItem.ionPageElement.style.setProperty('visibility', 'hidden');
+            leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
         }
-        return { viewItem, match };
-        function matchView(v) {
-            var _a, _b;
-            if (mustBeIonRoute && !v.ionRoute) {
-                return false;
+        return shouldSkip;
+    }
+    /**
+     * Handles entering view with no ion-page element yet (waiting for render).
+     */
+    handleWaitingForIonPage(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem) {
+        const enteringRouteElement = enteringViewItem.reactElement?.props?.element;
+        // Handle Navigate components (they never render an IonPage)
+        if (isNavigateElement(enteringRouteElement)) {
+            this.waitingForIonPage = false;
+            if (this.ionPageWaitTimeout) {
+                clearTimeout(this.ionPageWaitTimeout);
+                this.ionPageWaitTimeout = undefined;
             }
-            match = matchPath({
-                pathname,
-                componentProps: v.routeData.childProps,
+            this.pendingPageTransition = false;
+            // Hide ALL other visible views in this outlet for Navigate redirects.
+            // Same rationale as the timeout path: intermediate redirects can shift
+            // the leaving view reference, leaving the original page visible.
+            const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
+            allViewsInOutlet.forEach((viewItem) => {
+                if (viewItem.id !== enteringViewItem.id && viewItem.ionPageElement) {
+                    hideIonPageElement(viewItem.ionPageElement);
+                }
             });
-            if (match) {
-                /**
-                 * Even though we have a match from react-router, we do not know if the match
-                 * is for this specific view item.
-                 *
-                 * To validate this, we need to check if the path and url match the view item's route data.
-                 */
-                const hasParameter = match.path.includes(':');
-                if (!hasParameter || (hasParameter && match.url === ((_b = (_a = v.routeData) === null || _a === void 0 ? void 0 : _a.match) === null || _b === void 0 ? void 0 : _b.url))) {
-                    viewItem = v;
-                    return true;
+            // Don't unmount if entering and leaving are the same view item
+            if (shouldUnmountLeavingViewItem && leavingViewItem && enteringViewItem !== leavingViewItem) {
+                const shouldPreserveLeavingView = routeInfo.routeAction === 'pop' && isViewItemPreservableOnPop(leavingViewItem);
+                if (routeInfo.routeAction !== 'replace' && !shouldPreserveLeavingView) {
+                    leavingViewItem.mount = false;
                 }
+                else if (shouldPreserveLeavingView) {
+                    this.preservedViewItems.add(leavingViewItem);
+                }
+                this.handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem);
             }
-            return false;
-        }
-        function matchDefaultRoute(v) {
-            // try to find a route that doesn't have a path or from prop, that will be our default route
-            if (!v.routeData.childProps.path && !v.routeData.childProps.from) {
-                match = {
-                    path: pathname,
-                    url: pathname,
-                    isExact: true,
-                    params: {},
-                };
-                viewItem = v;
-                return true;
-            }
-            return false;
+            this.cleanupPreservedViewsOnPush(routeInfo, enteringViewItem, leavingViewItem);
+            this.forceUpdate();
+            return;
         }
-    }
-}
-function matchComponent$1(node, pathname) {
-    return matchPath({
-        pathname,
-        componentProps: node.props,
-    });
-}
-
-function clonePageElement(leavingViewHtml) {
-    let html;
-    if (typeof leavingViewHtml === 'string') {
-        html = leavingViewHtml;
-    }
-    else {
-        html = leavingViewHtml.outerHTML;
-    }
-    if (document) {
-        const newEl = document.createElement('div');
-        newEl.innerHTML = html;
-        newEl.style.zIndex = '';
-        // Remove an existing back button so the new element doesn't get two of them
-        const ionBackButton = newEl.getElementsByTagName('ion-back-button');
-        if (ionBackButton[0]) {
-            ionBackButton[0].remove();
+        // Do not hide the leaving view here - wait until the entering view is ready.
+        // Hiding the leaving view while the entering view is still mounting causes a flash
+        // where both views are hidden/invisible simultaneously.
+        // The leaving view will be hidden in transitionPage() after the entering view is visible.
+        this.waitingForIonPage = true;
+        if (this.ionPageWaitTimeout) {
+            clearTimeout(this.ionPageWaitTimeout);
         }
-        return newEl.firstChild;
+        this.ionPageWaitTimeout = setTimeout(() => {
+            this.ionPageWaitTimeout = undefined;
+            if (!this.waitingForIonPage) {
+                return;
+            }
+            this.waitingForIonPage = false;
+            const latestEnteringView = this.context.findViewItemByRouteInfo(routeInfo, this.id) ?? enteringViewItem;
+            const latestLeavingView = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id) ?? leavingViewItem;
+            if (latestEnteringView?.ionPageElement) {
+                const shouldSkipAnimation = this.applySkipAnimationIfNeeded(latestEnteringView, latestLeavingView ?? undefined);
+                this.transitionPage(routeInfo, latestEnteringView, latestLeavingView ?? undefined, undefined, false, shouldSkipAnimation);
+                if (shouldUnmountLeavingViewItem && latestLeavingView && latestEnteringView !== latestLeavingView) {
+                    const shouldPreserveLeavingView = routeInfo.routeAction === 'pop' && isViewItemPreservableOnPop(latestLeavingView);
+                    if (routeInfo.routeAction !== 'replace' && !shouldPreserveLeavingView) {
+                        latestLeavingView.mount = false;
+                    }
+                    else if (shouldPreserveLeavingView) {
+                        this.preservedViewItems.add(latestLeavingView);
+                    }
+                    this.handleLeavingViewUnmount(routeInfo, latestEnteringView, latestLeavingView);
+                }
+                this.cleanupPreservedViewsOnPush(routeInfo, latestEnteringView, latestLeavingView ?? undefined);
+                this.forceUpdate();
+            }
+            else {
+                /**
+                 * Timeout fired and entering view still has no ionPageElement.
+                 * This happens for container routes that render nested outlets without a direct IonPage.
+                 * Hide ALL other visible views in this outlet, not just the computed leaving view.
+                 * This handles cases where intermediate redirects (e.g., Navigate in nested routes)
+                 * change the leaving view reference, leaving the original page still visible.
+                 */
+                const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
+                allViewsInOutlet.forEach((viewItem) => {
+                    if (viewItem.id !== latestEnteringView.id && viewItem.ionPageElement) {
+                        hideIonPageElement(viewItem.ionPageElement);
+                    }
+                });
+                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();
     }
-    return undefined;
-}
-
-const isViewVisible = (el) => !el.classList.contains('ion-page-invisible') && !el.classList.contains('ion-page-hidden');
-class StackManager extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.stackContextValue = {
-            registerIonPage: this.registerIonPage.bind(this),
-            isInOutlet: () => true,
-        };
-        this.pendingPageTransition = false;
-        this.registerIonPage = this.registerIonPage.bind(this);
-        this.transitionPage = this.transitionPage.bind(this);
-        this.handlePageTransition = this.handlePageTransition.bind(this);
-        this.id = generateId('routerOutlet');
-        this.prevProps = undefined;
-        this.skipTransition = false;
+    /**
+     * Gets the route info to use for finding views during swipe-to-go-back gestures.
+     * This pattern is used in multiple places in setupRouterOutlet.
+     */
+    getSwipeBackRouteInfo() {
+        const { routeInfo } = this.props;
+        return this.prevProps && this.prevProps.routeInfo.pathname === routeInfo.pushedByRoute
+            ? this.prevProps.routeInfo
+            : { pathname: routeInfo.pushedByRoute || '' };
     }
     componentDidMount() {
-        if (this.clearOutletTimeout) {
-            /**
-             * The clearOutlet integration with React Router is a bit hacky.
-             * It uses a timeout to clear the outlet after a transition.
-             * In React v18, components are mounted and unmounted in development mode
-             * to check for side effects.
-             *
-             * This clearTimeout prevents the outlet from being cleared when the component is re-mounted,
-             * which should only happen in development mode and as a result of a hot reload.
-             */
-            clearTimeout(this.clearOutletTimeout);
-        }
+        this._isMounted = true;
         if (this.routerOutletElement) {
             this.setupRouterOutlet(this.routerOutletElement);
-            this.handlePageTransition(this.props.routeInfo);
+            // Defer to a microtask to avoid calling forceUpdate() synchronously during
+            // React 19's reappearLayoutEffects phase, which re-runs componentDidMount
+            // without a preceding componentWillUnmount and causes "Maximum update depth exceeded".
+            const routeInfo = this.props.routeInfo;
+            queueMicrotask(() => {
+                if (this._isMounted && this.props.routeInfo.pathname === routeInfo.pathname) {
+                    this.handlePageTransition(routeInfo);
+                }
+            });
         }
     }
     componentDidUpdate(prevProps) {
@@ -255,117 +2197,196 @@ class StackManager extends React.PureComponent {
         }
     }
     componentWillUnmount() {
-        this.clearOutletTimeout = this.context.clearOutlet(this.id);
+        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;
+        }
+        if (this.outOfScopeUnmountTimeout) {
+            clearTimeout(this.outOfScopeUnmountTimeout);
+            this.outOfScopeUnmountTimeout = undefined;
+        }
+        this.waitingForIonPage = false;
+        this.preservedViewItems.clear();
+        // Hide all views in this outlet before clearing.
+        // This is critical for nested outlets - when the parent component unmounts,
+        // the nested outlet's componentDidUpdate won't be called, so we must hide
+        // the ion-page elements here to prevent them from remaining visible on top
+        // of other content after navigation to a different route.
+        const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
+        allViewsInOutlet.forEach((viewItem) => {
+            hideIonPageElement(viewItem.ionPageElement);
+        });
+        this.context.clearOutlet(this.id);
     }
+    /**
+     * Sets the transition between pages within this router outlet.
+     * This function determines the entering and leaving views based on the
+     * provided route information and triggers the appropriate animation.
+     * It also handles scenarios like initial loads, back navigation, and
+     * navigation to the same view with different parameters.
+     *
+     * @param routeInfo It contains info about the current route,
+     * the previous route, and the action taken (e.g., push, replace).
+     *
+     * @returns A promise that resolves when the transition is complete.
+     * If no transition is needed or if the router outlet isn't ready,
+     * the Promise may resolve immediately.
+     */
     async handlePageTransition(routeInfo) {
-        var _a, _b;
+        // Wait for router outlet to mount
         if (!this.routerOutletElement || !this.routerOutletElement.commit) {
-            /**
-             * The route outlet has not mounted yet. We need to wait for it to render
-             * before we can transition the page.
-             *
-             * Set a flag to indicate that we should transition the page after
-             * the component has updated.
-             */
             this.pendingPageTransition = true;
+            return;
         }
-        else {
-            let enteringViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id);
-            let leavingViewItem = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id);
-            if (!leavingViewItem && routeInfo.prevRouteLastPathname) {
-                leavingViewItem = this.context.findViewItemByPathname(routeInfo.prevRouteLastPathname, this.id);
+        // Find entering and leaving view items
+        const viewItems = this.findViewItems(routeInfo);
+        let enteringViewItem = viewItems.enteringViewItem;
+        let leavingViewItem = viewItems.leavingViewItem;
+        let shouldUnmountLeavingViewItem = this.shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem);
+        // Get parent path for nested outlets
+        const parentPath = this.getParentPath();
+        // Handle out-of-scope outlet (route outside mount path)
+        if (this.handleOutOfScopeOutlet(routeInfo)) {
+            return;
+        }
+        // Handle root navigation: unmount all non-entering views
+        if (routeInfo.routeDirection === 'root') {
+            this.handleRootNavigation(enteringViewItem);
+            leavingViewItem = undefined;
+            shouldUnmountLeavingViewItem = false;
+        }
+        // Clear any pending out-of-scope unmount timeout
+        if (this.outOfScopeUnmountTimeout) {
+            clearTimeout(this.outOfScopeUnmountTimeout);
+            this.outOfScopeUnmountTimeout = undefined;
+        }
+        // Handle nested outlet with relative routes but no valid parent path
+        if (this.handleOutOfContextNestedOutlet(parentPath, leavingViewItem)) {
+            return;
+        }
+        // Find the matching route element
+        const enteringRoute = findRouteByRouteInfo(this.ionRouterOutlet?.props.children, routeInfo, parentPath);
+        // Handle nested outlet with no matching route
+        if (this.handleNoMatchingRoute(enteringRoute, enteringViewItem, leavingViewItem)) {
+            return;
+        }
+        // Create or update the entering view item
+        if (enteringViewItem && enteringRoute) {
+            enteringViewItem.reactElement = enteringRoute;
+        }
+        else if (enteringRoute) {
+            enteringViewItem = this.context.createViewItem(this.id, enteringRoute, routeInfo);
+            this.context.addViewItem(enteringViewItem);
+        }
+        // Handle transition based on ion-page element availability
+        // Check if the ionPageElement is still in the document.
+        // If the view was previously unmounted (mount=false), the ViewLifeCycleManager
+        // removes the React component from the tree, which removes the IonPage from the DOM.
+        // The ionPageElement reference becomes stale and we need to wait for a new one.
+        const ionPageIsInDocument = enteringViewItem?.ionPageElement && document.body.contains(enteringViewItem.ionPageElement);
+        if (enteringViewItem && ionPageIsInDocument) {
+            // Clear waiting state
+            if (this.waitingForIonPage) {
+                this.waitingForIonPage = false;
             }
-            // Check if leavingViewItem should be unmounted
-            if (leavingViewItem) {
-                if (routeInfo.routeAction === 'replace') {
-                    leavingViewItem.mount = false;
-                }
-                else if (!(routeInfo.routeAction === 'push' && routeInfo.routeDirection === 'forward')) {
-                    if (routeInfo.routeDirection !== 'none' && enteringViewItem !== leavingViewItem) {
-                        leavingViewItem.mount = false;
-                    }
-                }
-                else if ((_a = routeInfo.routeOptions) === null || _a === void 0 ? void 0 : _a.unmount) {
-                    leavingViewItem.mount = false;
-                }
+            if (this.ionPageWaitTimeout) {
+                clearTimeout(this.ionPageWaitTimeout);
+                this.ionPageWaitTimeout = undefined;
             }
-            const enteringRoute = matchRoute((_b = this.ionRouterOutlet) === null || _b === void 0 ? void 0 : _b.props.children, routeInfo);
-            if (enteringViewItem) {
-                enteringViewItem.reactElement = enteringRoute;
+            this.handleReadyEnteringView(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem);
+        }
+        else if (enteringViewItem && !ionPageIsInDocument) {
+            // Wait for ion-page to mount
+            // This handles both: no ionPageElement, or stale ionPageElement (not in document)
+            // Clear stale reference if the element is no longer in the document
+            if (enteringViewItem.ionPageElement && !document.body.contains(enteringViewItem.ionPageElement)) {
+                enteringViewItem.ionPageElement = undefined;
             }
-            else if (enteringRoute) {
-                enteringViewItem = this.context.createViewItem(this.id, enteringRoute, routeInfo);
-                this.context.addViewItem(enteringViewItem);
+            // Ensure the view is marked as mounted so ViewLifeCycleManager renders the IonPage
+            if (!enteringViewItem.mount) {
+                enteringViewItem.mount = true;
             }
-            if (enteringViewItem && enteringViewItem.ionPageElement) {
-                /**
-                 * If the entering view item is the same as the leaving view item,
-                 * then we don't need to transition.
-                 */
-                if (enteringViewItem === leavingViewItem) {
-                    /**
-                     * If the entering view item is the same as the leaving view item,
-                     * we are either transitioning using parameterized routes to the same view
-                     * or a parent router outlet is re-rendering as a result of React props changing.
-                     *
-                     * If the route data does not match the current path, the parent router outlet
-                     * is attempting to transition and we cancel the operation.
-                     */
-                    if (enteringViewItem.routeData.match.url !== routeInfo.pathname) {
-                        return;
-                    }
-                }
-                /**
-                 * If there isn't a leaving view item, but the route info indicates
-                 * that the user has routed from a previous path, then we need
-                 * to find the leaving view item to transition between.
-                 */
-                if (!leavingViewItem && this.props.routeInfo.prevRouteLastPathname) {
-                    leavingViewItem = this.context.findViewItemByPathname(this.props.routeInfo.prevRouteLastPathname, this.id);
-                }
-                /**
-                 * If the entering view is already visible and the leaving view is not, the transition does not need to occur.
-                 */
-                if (isViewVisible(enteringViewItem.ionPageElement) &&
-                    leavingViewItem !== undefined &&
-                    !isViewVisible(leavingViewItem.ionPageElement)) {
-                    return;
+            this.handleWaitingForIonPage(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem);
+            return;
+        }
+        else if (!enteringViewItem && !enteringRoute) {
+            // No view or route found - likely leaving to another outlet
+            if (leavingViewItem) {
+                hideIonPageElement(leavingViewItem.ionPageElement);
+                const shouldPreserveLeavingView = routeInfo.routeAction === 'pop' && isViewItemPreservableOnPop(leavingViewItem);
+                if (shouldUnmountLeavingViewItem && !shouldPreserveLeavingView) {
+                    leavingViewItem.mount = false;
                 }
-                /**
-                 * The view should only be transitioned in the following cases:
-                 * 1. Performing a replace or pop action, such as a swipe to go back gesture
-                 * to animation the leaving view off the screen.
-                 *
-                 * 2. Navigating between top-level router outlets, such as /page-1 to /page-2;
-                 * or navigating within a nested outlet, such as /tabs/tab-1 to /tabs/tab-2.
-                 *
-                 * 3. The entering view is an ion-router-outlet containing a page
-                 * matching the current route and that hasn't already transitioned in.
-                 *
-                 * This should only happen when navigating directly to a nested router outlet
-                 * route or on an initial page load (i.e. refreshing). In cases when loading
-                 * /tabs/tab-1, we need to transition the /tabs page element into the view.
-                 */
-                this.transitionPage(routeInfo, enteringViewItem, leavingViewItem);
-            }
-            else if (leavingViewItem && !enteringRoute && !enteringViewItem) {
-                // If we have a leavingView but no entering view/route, we are probably leaving to
-                // another outlet, so hide this leavingView. We do it in a timeout to give time for a
-                // transition to finish.
-                // setTimeout(() => {
-                if (leavingViewItem.ionPageElement) {
-                    leavingViewItem.ionPageElement.classList.add('ion-page-hidden');
-                    leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
+                else if (shouldUnmountLeavingViewItem && shouldPreserveLeavingView) {
+                    this.preservedViewItems.add(leavingViewItem);
                 }
-                // }, 250);
             }
-            this.forceUpdate();
         }
+        this.forceUpdate();
     }
+    /**
+     * Registers an `<IonPage>` DOM element with the `StackManager`.
+     * This is called when `<IonPage>` has been mounted.
+     *
+     * @param page The element of the rendered `<IonPage>`.
+     * @param routeInfo The route information that associates with `<IonPage>`.
+     */
     registerIonPage(page, routeInfo) {
+        /**
+         * DO NOT remove ion-page-invisible here.
+         *
+         * PageManager's ref callback adds ion-page-invisible synchronously to prevent flash.
+         * At this point, the <IonPage> div exists but its CHILDREN (header, toolbar, menu-button)
+         * have NOT rendered yet. If we remove ion-page-invisible now, the page becomes visible
+         * with empty/incomplete content, causing a flicker (especially for ion-menu-button which
+         * starts with menu-button-hidden class).
+         *
+         * Instead, let transitionPage handle visibility AFTER waiting for components to be ready.
+         * This ensures the page only becomes visible when its content is fully rendered.
+         */
+        this.waitingForIonPage = false;
+        if (this.ionPageWaitTimeout) {
+            clearTimeout(this.ionPageWaitTimeout);
+            this.ionPageWaitTimeout = undefined;
+        }
+        this.pendingPageTransition = false;
         const foundView = this.context.findViewItemByRouteInfo(routeInfo, this.id);
         if (foundView) {
             const oldPageElement = foundView.ionPageElement;
+            /**
+             * FIX for issue #28878: Reject orphaned IonPage registrations.
+             *
+             * When a component conditionally renders different IonPages (e.g., list vs empty state)
+             * using React keys, and state changes simultaneously with navigation, the new IonPage
+             * tries to register for a route we're navigating away from. This creates a stale view.
+             *
+             * Only reject if both pageIds exist and differ, to allow nested outlet registrations.
+             */
+            if (this.shouldRejectOrphanedPage(page, oldPageElement, routeInfo)) {
+                this.hideAndRemoveOrphanedPage(page);
+                return;
+            }
+            /**
+             * Don't let a nested element (e.g., ion-router-outlet with ionPage prop)
+             * override an existing IonPage registration when the existing element is
+             * an ancestor of the new one. This ensures ionPageElement always points
+             * to the outermost IonPage, which is needed to properly hide the entire
+             * page during back navigation (not just the inner outlet).
+             */
+            if (oldPageElement && oldPageElement !== page && oldPageElement.isConnected && oldPageElement.contains(page)) {
+                return;
+            }
             foundView.ionPageElement = page;
             foundView.ionRoute = true;
             /**
@@ -379,83 +2400,156 @@ class StackManager extends React.PureComponent {
         }
         this.handlePageTransition(routeInfo);
     }
+    /**
+     * Checks if a new IonPage should be rejected (component re-rendered while navigating away).
+     */
+    shouldRejectOrphanedPage(newPage, oldPageElement, routeInfo) {
+        if (!oldPageElement || oldPageElement === newPage) {
+            return false;
+        }
+        const newPageId = newPage.getAttribute('data-pageid');
+        const oldPageId = oldPageElement.getAttribute('data-pageid');
+        if (!newPageId || !oldPageId || newPageId === oldPageId) {
+            return false;
+        }
+        return this.props.routeInfo.pathname !== routeInfo.pathname;
+    }
+    hideAndRemoveOrphanedPage(page) {
+        page.classList.add('ion-page-hidden');
+        page.setAttribute('aria-hidden', 'true');
+        setTimeout(() => {
+            if (page.parentElement) {
+                page.remove();
+            }
+        }, VIEW_UNMOUNT_DELAY_MS);
+    }
+    /**
+     * Dismisses every presented Ionic overlay in the document. Core moves overlays
+     * to ion-app when presented, so they are no longer descendants of this outlet
+     * and stay visible even after the outlet is hidden, blocking the entering view.
+     *
+     * Scope is document-wide because the original outlet-to-overlay DOM linkage is
+     * lost after presentation. Overlays without a trackable presenting element
+     * cannot be safely attributed to a specific outlet.
+     */
+    dismissPresentedOverlays() {
+        // Matches the overlay set tracked by core's getPresentedOverlays (see
+        // core/src/utils/overlays.ts). An overlay is "presented" when it lacks the
+        // `overlay-hidden` class.
+        const overlaySelector = 'ion-modal, ion-popover, ion-action-sheet, ion-alert, ion-loading';
+        document.querySelectorAll(overlaySelector).forEach((overlay) => {
+            if (overlay.classList.contains('overlay-hidden') || typeof overlay.dismiss !== 'function') {
+                return;
+            }
+            overlay.dismiss().catch(() => {
+                /* Overlay may already be dismissing or its canDismiss guard may block it. */
+            });
+        });
+    }
+    /**
+     * Resolves the entering view for a swipe-back gesture.
+     *
+     * Prefers a view owned by this outlet. Falls back to searching all outlets only
+     * when the candidate's ion-page element is a descendant of this outlet. Without
+     * the containment guard, a nested child outlet can claim ownership of a sibling
+     * outlet's view, running the swipe gesture on the wrong router outlet.
+     */
+    findEnteringViewForSwipe(swipeBackRouteInfo) {
+        const enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
+        if (enteringViewItem) {
+            return enteringViewItem;
+        }
+        const candidate = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, undefined, false);
+        if (candidate?.ionPageElement && this.routerOutletElement?.contains(candidate.ionPageElement)) {
+            return candidate;
+        }
+        return undefined;
+    }
+    /**
+     * Configures swipe-to-go-back gesture for the router outlet.
+     */
     async setupRouterOutlet(routerOutlet) {
         const canStart = () => {
-            const config = getConfig();
-            const swipeEnabled = config && config.get('swipeBackEnabled', routerOutlet.mode === 'ios');
-            if (!swipeEnabled) {
-                return false;
-            }
             const { routeInfo } = this.props;
-            const propsToUse = this.prevProps && this.prevProps.routeInfo.pathname === routeInfo.pushedByRoute
-                ? this.prevProps.routeInfo
-                : { pathname: routeInfo.pushedByRoute || '' };
-            const enteringViewItem = this.context.findViewItemByRouteInfo(propsToUse, this.id, false);
-            return (!!enteringViewItem &&
-                /**
-                 * The root url '/' is treated as
-                 * the first view item (but is never mounted),
-                 * so we do not want to swipe back to the
-                 * root url.
-                 */
-                enteringViewItem.mount &&
-                /**
-                 * When on the first page (whatever view
-                 * you land on after the root url) it
-                 * is possible for findViewItemByRouteInfo to
-                 * return the exact same view you are currently on.
-                 * Make sure that we are not swiping back to the same
-                 * instances of a view.
-                 */
-                enteringViewItem.routeData.match.path !== routeInfo.pathname);
+            const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
+            const enteringViewItem = this.findEnteringViewForSwipe(swipeBackRouteInfo);
+            // View might have mount=false but ionPageElement still in DOM
+            const ionPageInDocument = Boolean(enteringViewItem?.ionPageElement && document.body.contains(enteringViewItem.ionPageElement));
+            // For wildcard/parameterized routes, the pattern path (e.g. "/foo/*") will
+            // never equal the resolved pathname (e.g. "/foo/bar"), so the pattern check
+            // alone isn't sufficient. Also, verify the entering view's resolved pathname
+            // differs from the current pathname — if they match, the entering and leaving
+            // views are the same and the swipe gesture shouldn't start.
+            const canStartSwipe = !!enteringViewItem &&
+                (enteringViewItem.mount || ionPageInDocument) &&
+                enteringViewItem.routeData.match.pattern.path !== routeInfo.pathname &&
+                enteringViewItem.routeData.match.pathname !== routeInfo.pathname;
+            debug('SwipeBackCanStart', () => ({
+                outletId: this.id,
+                routePathname: routeInfo.pathname,
+                swipeBackPathname: swipeBackRouteInfo?.pathname,
+                enteringViewId: enteringViewItem?.id,
+                enteringViewPath: enteringViewItem?.reactElement?.props?.path,
+                enteringMount: enteringViewItem?.mount,
+                ionPageInDocument,
+                canStartSwipe,
+            }));
+            return canStartSwipe;
         };
         const onStart = async () => {
             const { routeInfo } = this.props;
-            const propsToUse = this.prevProps && this.prevProps.routeInfo.pathname === routeInfo.pushedByRoute
-                ? this.prevProps.routeInfo
-                : { pathname: routeInfo.pushedByRoute || '' };
-            const enteringViewItem = this.context.findViewItemByRouteInfo(propsToUse, this.id, false);
+            const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
+            const enteringViewItem = this.findEnteringViewForSwipe(swipeBackRouteInfo);
             const leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id, false);
-            /**
-             * When the gesture starts, kick off
-             * a transition that is controlled
-             * via a swipe gesture.
-             */
+            debug('SwipeBackOnStart:entry', () => ({
+                outletId: this.id,
+                routePathname: routeInfo.pathname,
+                swipeBackPathname: swipeBackRouteInfo?.pathname,
+                enteringViewId: enteringViewItem?.id,
+                enteringViewPath: enteringViewItem?.reactElement?.props?.path,
+                enteringMount: enteringViewItem?.mount,
+                hasEnteringIonPageElement: !!enteringViewItem?.ionPageElement,
+                leavingViewId: leavingViewItem?.id,
+            }));
+            // Ensure the entering view is mounted so React keeps rendering it during the gesture.
+            // This is important when the view was previously marked for unmount but its
+            // ionPageElement is still in the DOM.
+            if (enteringViewItem && !enteringViewItem.mount) {
+                enteringViewItem.mount = true;
+            }
+            // Reveal synchronously. `transitionPage` defers this behind async commit,
+            // but the gesture's first progress frame fires in the same tick as onStart,
+            // so an async reveal leaves the entering page hidden until the next frame.
+            revealIonPageForSwipeBack(enteringViewItem?.ionPageElement);
+            // When the gesture starts, kick off a transition controlled via swipe gesture
             if (enteringViewItem && leavingViewItem) {
                 await this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back', true);
             }
+            debug('SwipeBackOnStart:exit', () => ({
+                outletId: this.id,
+                enteringFinalComputedDisplay: enteringViewItem?.ionPageElement
+                    ? getComputedStyle(enteringViewItem.ionPageElement).display
+                    : null,
+                enteringFinalInlineDisplay: enteringViewItem?.ionPageElement?.style.display ?? null,
+                enteringFinalHiddenClass: enteringViewItem?.ionPageElement?.classList.contains('ion-page-hidden') ?? null,
+            }));
             return Promise.resolve();
         };
         const onEnd = (shouldContinue) => {
             if (shouldContinue) {
+                // User finished the swipe gesture, so complete the back navigation
                 this.skipTransition = true;
                 this.context.goBack();
             }
             else {
-                /**
-                 * In the event that the swipe
-                 * gesture was aborted, we should
-                 * re-hide the page that was going to enter.
-                 */
+                // Swipe gesture was aborted - re-hide the page that was going to enter
                 const { routeInfo } = this.props;
-                const propsToUse = this.prevProps && this.prevProps.routeInfo.pathname === routeInfo.pushedByRoute
-                    ? this.prevProps.routeInfo
-                    : { pathname: routeInfo.pushedByRoute || '' };
-                const enteringViewItem = this.context.findViewItemByRouteInfo(propsToUse, this.id, false);
+                const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
+                const enteringViewItem = this.findEnteringViewForSwipe(swipeBackRouteInfo);
                 const leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id, false);
-                /**
-                 * Ionic React has a design defect where it
-                 * a) Unmounts the leaving view item when using parameterized routes
-                 * b) Considers the current view to be the entering view when using
-                 * parameterized routes
-                 *
-                 * As a result, we should not hide the view item here
-                 * as it will cause the current view to be hidden.
-                 */
-                if (enteringViewItem !== leavingViewItem && (enteringViewItem === null || enteringViewItem === void 0 ? void 0 : enteringViewItem.ionPageElement) !== undefined) {
-                    const { ionPageElement } = enteringViewItem;
-                    ionPageElement.setAttribute('aria-hidden', 'true');
-                    ionPageElement.classList.add('ion-page-hidden');
+                // Don't hide if entering and leaving are the same (parameterized route edge case)
+                if (enteringViewItem !== leavingViewItem && enteringViewItem?.ionPageElement !== undefined) {
+                    hideIonPageElement(enteringViewItem.ionPageElement);
                 }
             }
         };
@@ -465,7 +2559,24 @@ class StackManager extends React.PureComponent {
             onEnd,
         };
     }
-    async transitionPage(routeInfo, enteringViewItem, leavingViewItem, direction, progressAnimation = false) {
+    /**
+     * Animates the transition between the entering and leaving pages within the
+     * router outlet.
+     *
+     * @param routeInfo Info about the current route.
+     * @param enteringViewItem The view item that is entering.
+     * @param leavingViewItem The view item that is leaving.
+     * @param direction The direction of the transition.
+     * @param progressAnimation Indicates if the transition is part of a
+     * gesture controlled animation (e.g., swipe to go back).
+     * Defaults to `false`.
+     * @param skipAnimation When true, forces `duration: 0` so the page
+     * swap is instant (no visible animation). Used for ionPage outlets
+     * and back navigations that unmount the leaving view to prevent
+     * overlapping content during the transition. Defaults to `false`.
+     */
+    async transitionPage(routeInfo, enteringViewItem, leavingViewItem, direction, progressAnimation = false, skipAnimation = false) {
+        const myGeneration = ++this.transitionGeneration;
         const runCommit = async (enteringEl, leavingEl) => {
             const skipTransition = this.skipTransition;
             /**
@@ -493,24 +2604,56 @@ class StackManager extends React.PureComponent {
             }
             else {
                 enteringEl.classList.add('ion-page');
-                enteringEl.classList.add('ion-page-invisible');
+                /**
+                 * Only add ion-page-invisible if the element is not already visible.
+                 * During tab switches, the container page (e.g., TabContext wrapper) is
+                 * already visible and should remain so. Adding ion-page-invisible would
+                 * cause a flash where the visible page briefly becomes invisible.
+                 */
+                if (!isViewVisible(enteringEl)) {
+                    enteringEl.classList.add('ion-page-invisible');
+                }
             }
-            await routerOutlet.commit(enteringEl, leavingEl, {
-                duration: skipTransition || 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]);
+            // Bail out if the component unmounted during the commit animation
+            if (!this._isMounted)
+                return;
+            if (result === 'timeout') {
+                // Force entering page visible even though commit hung
+                enteringEl.classList.remove('ion-page-invisible');
+            }
+            /**
+             * If a newer transitionPage call ran while this commit was in-flight (e.g., a tab
+             * switch fired during a forward animation), the core commit may have applied
+             * ion-page-hidden to leavingEl even though the newer transition already made it
+             * visible. Undo that stale hide so the newer transition's DOM state wins.
+             */
+            if (myGeneration !== this.transitionGeneration && leavingEl && leavingEl === this.transitionEnteringElement) {
+                showIonPageElement(leavingEl);
+            }
+            if (!progressAnimation) {
+                enteringEl.classList.remove('ion-page-invisible');
+            }
         };
         const routerOutlet = this.routerOutletElement;
         const routeInfoFallbackDirection = routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root' ? undefined : routeInfo.routeDirection;
-        const directionToUse = direction !== null && direction !== void 0 ? direction : routeInfoFallbackDirection;
+        const directionToUse = direction ?? routeInfoFallbackDirection;
         if (enteringViewItem && enteringViewItem.ionPageElement && this.routerOutletElement) {
+            this.transitionEnteringElement = enteringViewItem.ionPageElement;
             if (leavingViewItem && leavingViewItem.ionPageElement && enteringViewItem === leavingViewItem) {
-                // If a page is transitioning to another version of itself
-                // we clone it so we can have an animation to show
-                const match = matchComponent(leavingViewItem.reactElement, routeInfo.pathname, true);
+                // Clone page for same-view transitions (e.g., /user/1 → /user/2)
+                const match = matchComponent(leavingViewItem.reactElement, routeInfo.pathname, undefined, this.outletMountPath);
                 if (match) {
                     const newLeavingElement = clonePageElement(leavingViewItem.ionPageElement.outerHTML);
                     if (newLeavingElement) {
@@ -520,14 +2663,111 @@ class StackManager extends React.PureComponent {
                     }
                 }
                 else {
+                    // Route no longer matches (e.g., /user/1 → /settings)
                     await runCommit(enteringViewItem.ionPageElement, undefined);
                 }
             }
             else {
-                await runCommit(enteringViewItem.ionPageElement, leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.ionPageElement);
-                if (leavingViewItem && leavingViewItem.ionPageElement && !progressAnimation) {
-                    leavingViewItem.ionPageElement.classList.add('ion-page-hidden');
-                    leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
+                const leavingEl = leavingViewItem?.ionPageElement;
+                // For non-animated transitions, don't pass leaving element to commit() to avoid
+                // flicker caused by commit() briefly unhiding the leaving page
+                const isNonAnimatedTransition = directionToUse === undefined && !progressAnimation;
+                if (isNonAnimatedTransition && leavingEl) {
+                    /**
+                     * 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');
+                    // 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');
+                    }
+                    else {
+                        enteringEl.classList.remove('can-go-back');
+                    }
+                    /**
+                     * Wait for components to be ready. Menu buttons start hidden (menu-button-hidden)
+                     * and become visible after componentDidLoad. Wait for hydration and visibility.
+                     */
+                    const waitForComponentsReady = () => {
+                        return new Promise((resolve) => {
+                            const checkReady = () => {
+                                const ionicComponents = enteringEl.querySelectorAll('ion-header, ion-toolbar, ion-buttons, ion-menu-button, ion-title, ion-content');
+                                const allHydrated = Array.from(ionicComponents).every((el) => el.classList.contains('hydrated'));
+                                const menuButtons = enteringEl.querySelectorAll('ion-menu-button');
+                                const menuButtonsReady = Array.from(menuButtons).every((el) => !el.classList.contains('menu-button-hidden'));
+                                return allHydrated && menuButtonsReady;
+                            };
+                            if (checkReady()) {
+                                resolve();
+                                return;
+                            }
+                            let resolved = false;
+                            const observer = new MutationObserver(() => {
+                                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,
+                                attributeFilter: ['class'],
+                            });
+                            setTimeout(() => {
+                                if (!resolved) {
+                                    resolved = true;
+                                    observer.disconnect();
+                                    if (this.transitionObserver === observer) {
+                                        this.transitionObserver = undefined;
+                                    }
+                                    resolve();
+                                }
+                            }, 100);
+                        });
+                    };
+                    await waitForComponentsReady();
+                    // Bail out if the component unmounted during waitForComponentsReady
+                    if (!this._isMounted)
+                        return;
+                    // Swap visibility synchronously - show entering, hide leaving
+                    // Skip hiding if a newer transition already made leavingEl the entering view
+                    enteringEl.classList.remove('ion-page-invisible');
+                    if (myGeneration === this.transitionGeneration || leavingEl !== this.transitionEnteringElement) {
+                        leavingEl.classList.add('ion-page-hidden');
+                        leavingEl.setAttribute('aria-hidden', 'true');
+                    }
+                }
+                else {
+                    await runCommit(enteringViewItem.ionPageElement, leavingEl);
+                    if (leavingEl && !progressAnimation) {
+                        // Skip hiding if a newer transition already made leavingEl the entering view
+                        // runCommit's generation check has already restored its visibility in that case
+                        if (myGeneration === this.transitionGeneration || leavingEl !== this.transitionEnteringElement) {
+                            leavingEl.classList.add('ion-page-hidden');
+                            leavingEl.setAttribute('aria-hidden', 'true');
+                        }
+                    }
                 }
             }
         }
@@ -535,206 +2775,495 @@ class StackManager extends React.PureComponent {
     render() {
         const { children } = this.props;
         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, () => {
-            this.forceUpdate();
-        });
-        return (React.createElement(StackContext.Provider, { value: this.stackContextValue }, React.cloneElement(ionRouterOutlet, {
-            ref: (node) => {
-                if (ionRouterOutlet.props.setRef) {
-                    ionRouterOutlet.props.setRef(node);
-                }
-                if (ionRouterOutlet.props.forwardedRef) {
-                    ionRouterOutlet.props.forwardedRef.current = node;
-                }
-                this.routerOutletElement = node;
-                const { ref } = ionRouterOutlet;
-                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?.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;
     }
 }
-function matchRoute(node, routeInfo) {
-    let matchedNode;
-    React.Children.forEach(node, (child) => {
-        const match = matchPath({
-            pathname: routeInfo.pathname,
-            componentProps: child.props,
-        });
-        if (match) {
-            matchedNode = child;
+/**
+ * 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,
+        };
     });
-    if (matchedNode) {
-        return matchedNode;
+}
+/**
+ * Finds the `<Route />` node matching the current route info.
+ * If no `<Route />` can be matched, a fallback node is returned.
+ * Routes are prioritized by specificity (most specific first).
+ *
+ * @param node The root node to search for `<Route />` nodes.
+ * @param routeInfo The route information to match against.
+ * @param parentPath The parent path that was matched by the parent outlet (for nested routing)
+ */
+function findRouteByRouteInfo(node, routeInfo, parentPath) {
+    let matchedNode;
+    let fallbackNode;
+    // `<Route />` nodes are rendered inside of a <Routes /> node
+    const routesChildren = getRoutesChildren(node) ?? node;
+    // Collect all route children
+    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 = bestMatch.route.handle?._element ?? undefined;
     }
-    // If we haven't found a node
-    // try to find one that doesn't have a path or from prop, that will be our not found route
-    React.Children.forEach(node, (child) => {
-        if (!(child.props.path || child.props.from)) {
-            matchedNode = child;
+    // Fallback: try pathless routes, but only if pathname is within scope.
+    if (!matchedNode) {
+        let pathnameInScope = true;
+        if (parentPath) {
+            pathnameInScope = isPathnameInScope(routeInfo.pathname, parentPath);
         }
-    });
-    return matchedNode;
+        else {
+            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);
+                }
+            }
+        }
+        if (pathnameInScope) {
+            for (const child of routeChildren) {
+                if (!child.props.path) {
+                    fallbackNode = child;
+                    break;
+                }
+            }
+        }
+    }
+    return matchedNode ?? fallbackNode;
 }
-function matchComponent(node, pathname, forceExact) {
+function matchComponent(node, pathname, forceExact, parentPath) {
+    const routePath = node?.props?.path;
+    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,
-        componentProps: Object.assign(Object.assign({}, node.props), { exact: forceExact }),
+        pathname: pathnameToMatch,
+        componentProps: {
+            ...node.props,
+            end: forceExact,
+        },
     });
 }
 
-class IonRouterInner extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.exitViewFromOtherOutletHandlers = [];
-        this.locationHistory = new LocationHistory();
-        this.viewStack = new ReactRouterViewStack();
-        this.routeMangerContextState = {
-            canGoBack: () => this.locationHistory.canGoBack(),
-            clearOutlet: this.viewStack.clear,
-            findViewItemByPathname: this.viewStack.findViewItemByPathname,
-            getChildrenToRender: this.viewStack.getChildrenToRender,
-            goBack: () => this.handleNavigateBack(),
-            createViewItem: this.viewStack.createViewItem,
-            findViewItemByRouteInfo: this.viewStack.findViewItemByRouteInfo,
-            findLeavingViewItemByRouteInfo: this.viewStack.findLeavingViewItemByRouteInfo,
-            addViewItem: this.viewStack.add,
-            unMountViewItem: this.viewStack.remove,
-        };
-        const routeInfo = {
-            id: generateId('routeInfo'),
-            pathname: this.props.location.pathname,
-            search: this.props.location.search,
-        };
-        this.locationHistory.add(routeInfo);
-        this.handleChangeTab = this.handleChangeTab.bind(this);
-        this.handleResetTab = this.handleResetTab.bind(this);
-        this.handleNativeBack = this.handleNativeBack.bind(this);
-        this.handleNavigate = this.handleNavigate.bind(this);
-        this.handleNavigateBack = this.handleNavigateBack.bind(this);
-        this.props.registerHistoryListener(this.handleHistoryChange.bind(this));
-        this.handleSetCurrentTab = this.handleSetCurrentTab.bind(this);
-        this.state = {
-            routeInfo,
-        };
-    }
-    handleChangeTab(tab, path, routeOptions) {
-        if (!path) {
-            return;
+/**
+ * `IonRouter` is responsible for managing the application's navigation
+ * state, tracking the history of visited routes, and coordinating
+ * transitions between different views. It intercepts route changes from
+ * React Router and translates them into actions that Ionic can understand
+ * and animate.
+ */
+const filterUndefinedParams = (params) => {
+    const result = {};
+    for (const key of Object.keys(params)) {
+        const value = params[key];
+        if (value !== undefined) {
+            result[key] = value;
         }
-        const routeInfo = this.locationHistory.getCurrentRouteInfoForTab(tab);
-        const [pathname, search] = path.split('?');
-        if (routeInfo) {
-            this.incomingRouteParams = Object.assign(Object.assign({}, routeInfo), { routeAction: 'push', routeDirection: 'none' });
-            if (routeInfo.pathname === pathname) {
-                this.incomingRouteParams.routeOptions = routeOptions;
-                this.props.history.push(routeInfo.pathname + (routeInfo.search || ''));
-            }
-            else {
-                /**
-                 * The recorded search has to match the URL we push, otherwise
-                 * handleHistoryChange sees a URL change where there is none.
-                 */
-                const normalizedSearch = search ? '?' + search : '';
-                this.incomingRouteParams.pathname = pathname;
-                this.incomingRouteParams.search = normalizedSearch;
-                this.incomingRouteParams.routeOptions = routeOptions;
-                this.props.history.push(pathname + normalizedSearch);
+    }
+    return result;
+};
+/**
+ * Checks if a POP event is a multi-step back navigation (navigate(-n) where n > 1).
+ * Walks the pushedByRoute chain from prevInfo to verify the destination is an ancestor
+ * in the same navigation chain. This distinguishes multi-step back from tab-crossing
+ * back navigation where prevInfo.pathname also differs from the browser destination.
+ */
+const checkIsMultiStepBack = (prevInfo, destinationPathname, history) => {
+    if (!prevInfo || prevInfo.pathname === destinationPathname)
+        return false;
+    const visited = new Set();
+    let walker = prevInfo;
+    while (walker?.pushedByRoute) {
+        if (visited.has(walker.id))
+            break; // cycle guard
+        visited.add(walker.id);
+        if (walker.pushedByRoute === destinationPathname)
+            return true;
+        walker = history.findLastLocation(walker);
+    }
+    return false;
+};
+const areParamsEqual = (a, b) => {
+    const paramsA = a || {};
+    const paramsB = b || {};
+    const keysA = Object.keys(paramsA);
+    const keysB = Object.keys(paramsB);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    return keysA.every((key) => {
+        const valueA = paramsA[key];
+        const valueB = paramsB[key];
+        if (Array.isArray(valueA) && Array.isArray(valueB)) {
+            if (valueA.length !== valueB.length) {
+                return false;
             }
+            return valueA.every((entry, idx) => entry === valueB[idx]);
         }
-        else {
-            this.handleNavigate(pathname, 'push', 'none', undefined, routeOptions, tab);
+        return valueA === valueB;
+    });
+};
+const IonRouter = ({ children, registerHistoryListener }) => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const didMountRef = useRef(false);
+    const locationHistory = useRef(new LocationHistory());
+    const currentTab = useRef(undefined);
+    const viewStack = useRef(new ReactRouterViewStack());
+    const incomingRouteParams = useRef(null);
+    /**
+     * Tracks location keys that the user navigated away from via browser back.
+     * When a POP event's destination key matches the top of this stack, it's a
+     * browser forward navigation. Uses React Router's unique location.key
+     * instead of URLs to correctly handle duplicate URLs in history (e.g.,
+     * navigating to /details, then /settings, then /details via routerLink,
+     * then pressing back).
+     * Cleared on PUSH (new navigation invalidates forward history).
+     */
+    const forwardStack = useRef([]);
+    /**
+     * Tracks the current location key so we can push it onto the forward stack
+     * when navigating back. Updated after each history change.
+     */
+    const currentLocationKeyRef = useRef(location.key);
+    const [routeInfo, setRouteInfo] = useState({
+        id: generateId('routeInfo'),
+        pathname: location.pathname,
+        search: location.search,
+        params: {},
+    });
+    useEffect(() => {
+        if (didMountRef.current) {
+            return;
         }
-    }
-    handleHistoryChange(location, action) {
-        var _a, _b, _c;
-        let leavingLocationInfo;
-        if (this.incomingRouteParams) {
-            if (this.incomingRouteParams.routeAction === 'replace') {
-                leavingLocationInfo = this.locationHistory.previous();
-            }
-            else {
-                leavingLocationInfo = this.locationHistory.current();
+        // Seed the history stack with the initial location and begin listening
+        // 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 = { ...locationHistory.current.current() };
+            if (ri.tab !== currentTab.current) {
+                ri.tab = currentTab.current;
+                locationHistory.current.update(ri);
             }
         }
-        else {
-            leavingLocationInfo = this.locationHistory.current();
+        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(() => {
+        const activeView = viewStack.current.findViewItemByRouteInfo(routeInfo, undefined, true);
+        const matchedParams = activeView?.routeData.match?.params;
+        if (matchedParams) {
+            const paramsCopy = filterUndefinedParams({ ...matchedParams });
+            if (areParamsEqual(routeInfo.params, paramsCopy)) {
+                return;
+            }
+            const updatedRouteInfo = {
+                ...routeInfo,
+                params: paramsCopy,
+            };
+            locationHistory.current.update(updatedRouteInfo);
+            setRouteInfo(updatedRouteInfo);
         }
+    }, [routeInfo]);
+    /**
+     * Triggered whenever the history changes, either through user navigation
+     * or programmatic changes. It transforms the raw browser history changes
+     * into `RouteInfo` objects, which are needed Ionic's animations and
+     * navigation patterns.
+     *
+     * @param location The current location object from the history.
+     * @param action The action that triggered the history change.
+     */
+    const handleHistoryChange = (location, action) => {
+        /**
+         * The leaving location is always the current route, for both programmatic
+         * and external navigations. Using `previous()` for replace actions was
+         * incorrect: it caused the equality check below to skip navigation when
+         * the replace destination matched the entry two slots back in history.
+         */
+        const leavingLocationInfo = locationHistory.current.current();
         const leavingUrl = leavingLocationInfo.pathname + leavingLocationInfo.search;
-        const currentUrl = location.pathname + (location.search || '');
-        if (leavingUrl !== currentUrl) {
-            if (!this.incomingRouteParams) {
+        if (leavingUrl !== location.pathname + location.search) {
+            if (!incomingRouteParams.current) {
+                // 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?.pathname;
+                    if (tabRootPath && (location.pathname === tabRootPath || location.pathname.startsWith(tabRootPath + '/'))) {
+                        tabToUse = currentTab.current;
+                    }
+                }
+                /**
+                 * A `REPLACE` action can be triggered by React Router's
+                 * `<Navigate />` component.
+                 */
                 if (action === 'REPLACE') {
-                    this.incomingRouteParams = {
+                    incomingRouteParams.current = {
                         routeAction: 'replace',
                         routeDirection: 'none',
-                        tab: this.currentTab,
+                        tab: tabToUse,
                     };
                 }
+                /**
+                 * A `POP` action can be triggered by the browser's back/forward
+                 * button. Both fire as POP events, so we use a forward stack to
+                 * distinguish them: when going back, we push the leaving pathname
+                 * onto the stack. When the next POP's destination matches the top
+                 * of the stack, it's a forward navigation.
+                 */
                 if (action === 'POP') {
-                    const currentRoute = this.locationHistory.current();
-                    if (currentRoute && currentRoute.pushedByRoute) {
-                        const prevInfo = this.locationHistory.findLastLocation(currentRoute);
-                        this.incomingRouteParams = Object.assign(Object.assign({}, prevInfo), { routeAction: 'pop', routeDirection: 'back' });
+                    const currentRoute = locationHistory.current.current();
+                    const isForwardNavigation = forwardStack.current.length > 0 && forwardStack.current[forwardStack.current.length - 1] === location.key;
+                    if (isForwardNavigation) {
+                        forwardStack.current.pop();
+                        incomingRouteParams.current = {
+                            routeAction: 'push',
+                            routeDirection: 'forward',
+                            tab: tabToUse,
+                        };
+                    }
+                    else if (currentRoute && currentRoute.pushedByRoute) {
+                        // Back navigation. Record current location key for potential forward
+                        forwardStack.current.push(currentLocationKeyRef.current);
+                        const prevInfo = locationHistory.current.findLastLocation(currentRoute);
+                        const isMultiStepBack = checkIsMultiStepBack(prevInfo, location.pathname, locationHistory.current);
+                        if (isMultiStepBack) {
+                            const destinationInfo = locationHistory.current.findLastLocationByPathname(location.pathname);
+                            incomingRouteParams.current = {
+                                ...(destinationInfo || {}),
+                                routeAction: 'pop',
+                                routeDirection: 'back',
+                            };
+                        }
+                        else if (prevInfo && prevInfo.pathname !== location.pathname && currentRoute.tab) {
+                            // Browser POP destination differs from within-tab back target.
+                            // Sync URL via replace, like handleNavigateBack's non-linear path (#25141).
+                            incomingRouteParams.current = { ...prevInfo, routeAction: 'pop', routeDirection: 'back' };
+                            forwardStack.current = [];
+                            handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', undefined, undefined, prevInfo.tab);
+                            return;
+                        }
+                        else {
+                            incomingRouteParams.current = { ...prevInfo, routeAction: 'pop', routeDirection: 'back' };
+                        }
                     }
                     else {
-                        this.incomingRouteParams = {
+                        // 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',
-                            tab: this.currentTab,
+                            tab: tabToUse,
                         };
                     }
                 }
-                if (!this.incomingRouteParams) {
-                    this.incomingRouteParams = {
+                if (!incomingRouteParams.current) {
+                    const state = location.state;
+                    incomingRouteParams.current = {
                         routeAction: 'push',
-                        routeDirection: ((_a = location.state) === null || _a === void 0 ? void 0 : _a.direction) || 'forward',
-                        routeOptions: (_b = location.state) === null || _b === void 0 ? void 0 : _b.routerOptions,
-                        tab: this.currentTab,
+                        routeDirection: state?.direction || 'forward',
+                        routeOptions: state?.routerOptions,
+                        tab: tabToUse,
                     };
                 }
             }
+            // New navigation (PUSH) invalidates browser forward history,
+            // so clear our forward stack to stay in sync.
+            if (action === 'PUSH') {
+                forwardStack.current = [];
+            }
             let routeInfo;
-            if ((_c = this.incomingRouteParams) === null || _c === void 0 ? void 0 : _c.id) {
-                routeInfo = Object.assign(Object.assign({}, this.incomingRouteParams), { lastPathname: leavingLocationInfo.pathname });
-                this.locationHistory.add(routeInfo);
+            // If we're navigating away from tabs to a non-tab route, clear the current tab
+            if (!locationHistory.current.findTabForPathname(location.pathname) && currentTab.current) {
+                currentTab.current = undefined;
+            }
+            /**
+             * An existing id indicates that it's re-activating an existing route.
+             * e.g., tab switching or navigating back to a previous route
+             */
+            if (incomingRouteParams.current?.id) {
+                routeInfo = {
+                    ...incomingRouteParams.current,
+                    lastPathname: leavingLocationInfo.pathname,
+                };
+                locationHistory.current.add(routeInfo);
+                /**
+                 * A new route is being created since it's not re-activating
+                 * an existing route.
+                 */
             }
             else {
-                const isPushed = this.incomingRouteParams.routeAction === 'push' && this.incomingRouteParams.routeDirection === 'forward';
-                routeInfo = Object.assign(Object.assign({ id: generateId('routeInfo') }, this.incomingRouteParams), { lastPathname: leavingLocationInfo.pathname, pathname: location.pathname, search: location.search, params: this.props.match.params, prevRouteLastPathname: leavingLocationInfo.lastPathname });
+                const isPushed = incomingRouteParams.current?.routeAction === 'push' &&
+                    incomingRouteParams.current.routeDirection === 'forward';
+                routeInfo = {
+                    id: generateId('routeInfo'),
+                    ...incomingRouteParams.current,
+                    lastPathname: leavingLocationInfo.pathname, // The URL we just came from
+                    pathname: location.pathname, // The current (destination) URL
+                    search: location.search,
+                    params: incomingRouteParams.current?.params
+                        ? filterUndefinedParams(incomingRouteParams.current.params)
+                        : {},
+                    prevRouteLastPathname: leavingLocationInfo.lastPathname,
+                };
                 if (isPushed) {
-                    routeInfo.tab = leavingLocationInfo.tab;
+                    // Only inherit tab from leaving route if we don't already have one.
+                    // This preserves tab context for same-tab navigation while allowing cross-tab navigation.
+                    routeInfo.tab = routeInfo.tab || leavingLocationInfo.tab;
+                    routeInfo.pushedByRoute = leavingLocationInfo.pathname;
+                }
+                else if (routeInfo.routeAction === 'push' &&
+                    routeInfo.routeDirection === 'none' &&
+                    routeInfo.tab === leavingLocationInfo.tab) {
+                    // Push with routerDirection="none" within the same tab (or non-tab) context.
+                    // Still needs pushedByRoute so the back button can navigate back correctly.
+                    // Cross-tab navigations with direction "none" are handled by the tab-switching
+                    // block below which has different pushedByRoute semantics.
+                    routeInfo.tab = routeInfo.tab || leavingLocationInfo.tab;
                     routeInfo.pushedByRoute = leavingLocationInfo.pathname;
                 }
                 else if (routeInfo.routeAction === 'pop') {
-                    const r = this.locationHistory.findLastLocation(routeInfo);
-                    routeInfo.pushedByRoute = r === null || r === void 0 ? void 0 : r.pushedByRoute;
+                    // Triggered by a browser back button or handleNavigateBack.
+                    // Find the route that pushed this one.
+                    const r = locationHistory.current.findLastLocation(routeInfo);
+                    routeInfo.pushedByRoute = r?.pushedByRoute;
+                    // Navigating to a new tab.
                 }
                 else if (routeInfo.routeAction === 'push' && routeInfo.tab !== leavingLocationInfo.tab) {
-                    // If we are switching tabs grab the last route info for the tab and use its pushedByRoute
-                    const lastRoute = this.locationHistory.getCurrentRouteInfoForTab(routeInfo.tab);
-                    routeInfo.pushedByRoute = lastRoute === null || lastRoute === void 0 ? void 0 : lastRoute.pushedByRoute;
+                    /**
+                     * If we are switching tabs grab the last route info for the
+                     * tab and use its `pushedByRoute`.
+                     */
+                    const lastRoute = locationHistory.current.getCurrentRouteInfoForTab(routeInfo.tab);
+                    /**
+                     * Tab bar switches (direction 'none') should not create cross-tab back
+                     * navigation. Only inherit pushedByRoute from the tab's own history.
+                     */
+                    if (routeInfo.routeDirection === 'none') {
+                        routeInfo.pushedByRoute = lastRoute?.pushedByRoute;
+                    }
+                    else {
+                        routeInfo.pushedByRoute = lastRoute?.pushedByRoute ?? leavingLocationInfo.pathname;
+                    }
+                    // Triggered by `navigate()` with replace or a `<Navigate />` component, etc.
                 }
                 else if (routeInfo.routeAction === 'replace') {
-                    // Make sure to set the lastPathname, etc.. to the current route so the page transitions out
-                    const currentRouteInfo = this.locationHistory.current();
                     /**
-                     * If going from /home to /child, then replacing from
-                     * /child to /home, we don't want the route info to
-                     * say that /home was pushed by /home which is not correct.
+                     * Make sure to set the `lastPathname`, etc.. to the current route
+                     * so the page transitions out.
+                     */
+                    const currentRouteInfo = locationHistory.current.current();
+                    /**
+                     * Special handling for `replace` to ensure correct `pushedByRoute`
+                     * and `lastPathname`.
+                     *
+                     * If going from `/home` to `/child`, then replacing from
+                     * `/child` to `/home`, we don't want the route info to
+                     * say that `/home` was pushed by `/home` which is not correct.
                      */
-                    const currentPushedBy = currentRouteInfo === null || currentRouteInfo === void 0 ? void 0 : currentRouteInfo.pushedByRoute;
+                    const currentPushedBy = currentRouteInfo?.pushedByRoute;
                     const pushedByRoute = currentPushedBy !== undefined && currentPushedBy !== routeInfo.pathname
                         ? currentPushedBy
                         : routeInfo.pushedByRoute;
-                    routeInfo.lastPathname = (currentRouteInfo === null || currentRouteInfo === void 0 ? void 0 : currentRouteInfo.pathname) || routeInfo.lastPathname;
-                    routeInfo.prevRouteLastPathname = currentRouteInfo === null || currentRouteInfo === void 0 ? void 0 : currentRouteInfo.lastPathname;
+                    routeInfo.lastPathname = currentRouteInfo?.pathname || routeInfo.lastPathname;
+                    routeInfo.prevRouteLastPathname = currentRouteInfo?.lastPathname;
                     routeInfo.pushedByRoute = pushedByRoute;
                     /**
                      * When replacing routes we should still prefer
@@ -742,49 +3271,137 @@ class IonRouterInner extends React.PureComponent {
                      * has specified when navigating first instead of relying
                      * on previously used directions/animations.
                      */
-                    routeInfo.routeDirection = routeInfo.routeDirection || (currentRouteInfo === null || currentRouteInfo === void 0 ? void 0 : currentRouteInfo.routeDirection);
-                    routeInfo.routeAnimation = routeInfo.routeAnimation || (currentRouteInfo === null || currentRouteInfo === void 0 ? void 0 : currentRouteInfo.routeAnimation);
+                    routeInfo.routeDirection = routeInfo.routeDirection || currentRouteInfo?.routeDirection;
+                    routeInfo.routeAnimation = routeInfo.routeAnimation || currentRouteInfo?.routeAnimation;
                 }
-                this.locationHistory.add(routeInfo);
+                locationHistory.current.add(routeInfo);
             }
-            this.setState({
-                routeInfo,
-            });
+            setRouteInfo(routeInfo);
         }
-        this.incomingRouteParams = undefined;
-    }
+        // Update the current location key after processing the history change.
+        // This ensures the forward stack records the correct key when navigating back.
+        currentLocationKeyRef.current = location.key;
+        incomingRouteParams.current = null;
+    };
     /**
-     * history@4.x uses goBack(), history@5.x uses back()
-     * TODO: If support for React Router <=5 is dropped
-     * this logic is no longer needed. We can just
-     * assume back() is available.
+     * Resets the specified tab to its initial, root route.
+     *
+     * @param tab The tab to reset.
+     * @param originalHref The original href for the tab.
+     * @param originalRouteOptions The original route options for the tab.
      */
-    handleNativeBack() {
-        const history = this.props.history;
-        const goBack = history.goBack || history.back;
-        goBack();
-    }
-    handleNavigate(path, routeAction, routeDirection, routeAnimation, routeOptions, tab) {
-        this.incomingRouteParams = Object.assign(this.incomingRouteParams || {}, {
-            routeAction,
-            routeDirection,
-            routeOptions,
-            routeAnimation,
-            tab,
-        });
-        if (routeAction === 'push') {
-            this.props.history.push(path);
+    const handleResetTab = (tab, originalHref, originalRouteOptions) => {
+        const routeInfo = locationHistory.current.getFirstRouteInfoForTab(tab);
+        if (routeInfo) {
+            const [pathname, search] = originalHref.split('?');
+            const newRouteInfo = { ...routeInfo };
+            newRouteInfo.pathname = pathname;
+            newRouteInfo.search = search ? '?' + search : '';
+            newRouteInfo.routeOptions = originalRouteOptions;
+            incomingRouteParams.current = { ...newRouteInfo, routeAction: 'pop', routeDirection: 'back' };
+            navigate(newRouteInfo.pathname + (newRouteInfo.search || ''));
+        }
+    };
+    /**
+     * Handles tab changes.
+     *
+     * @param tab The tab to switch to.
+     * @param path The new path for the tab.
+     * @param routeOptions Additional route options.
+     */
+    const handleChangeTab = (tab, path, routeOptions) => {
+        if (!path) {
+            return;
+        }
+        const routeInfo = locationHistory.current.getCurrentRouteInfoForTab(tab);
+        const [pathname, search] = path.split('?');
+        // User has navigated to the current tab before.
+        if (routeInfo) {
+            const routeParams = {
+                ...routeInfo,
+                routeAction: 'push',
+                routeDirection: 'none',
+            };
+            /**
+             * User is navigating to the same tab.
+             * e.g., `/tabs/home` → `/tabs/home`
+             */
+            if (routeInfo.pathname === pathname) {
+                const newSearch = search ? '?' + search : routeInfo.search;
+                incomingRouteParams.current = {
+                    ...routeParams,
+                    search: newSearch || '',
+                    routeOptions,
+                };
+                navigate(routeInfo.pathname + (newSearch || ''));
+                /**
+                 * User is navigating to a different tab.
+                 * e.g., `/tabs/home` → `/tabs/settings`
+                 */
+            }
+            else {
+                incomingRouteParams.current = {
+                    ...routeParams,
+                    pathname,
+                    search: search ? '?' + search : '',
+                    routeOptions,
+                };
+                navigate(pathname + (search ? '?' + search : ''));
+            }
+            // User has not navigated to this tab before.
         }
         else {
-            this.props.history.replace(path);
+            const fullPath = pathname + (search ? '?' + search : '');
+            handleNavigate(fullPath, 'push', 'none', undefined, routeOptions, tab);
         }
-    }
-    handleNavigateBack(defaultHref = '/', routeAnimation) {
+    };
+    /**
+     * Set the current active tab in `locationHistory`.
+     * This is crucial for maintaining tab history since each tab has
+     * its own navigation stack.
+     *
+     * @param tab The tab to set as active.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const handleSetCurrentTab = (tab, _routeInfo) => {
+        currentTab.current = tab;
+        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 = { ...current };
+        if (ri.tab !== tab) {
+            ri.tab = tab;
+            locationHistory.current.update(ri);
+        }
+    };
+    /**
+     * Handles the native back button press.
+     * It's usually called when a user presses the platform-native back action.
+     */
+    const handleNativeBack = () => {
+        navigate(-1);
+    };
+    /**
+     * Used to manage the back navigation within the Ionic React's routing
+     * system. It's deeply integrated with Ionic's view lifecycle, animations,
+     * and its custom history tracking (`locationHistory`) to provide a
+     * native-like transition and maintain correct application state.
+     *
+     * @param defaultHref The fallback URL to navigate to if there's no
+     * previous entry in the `locationHistory` stack.
+     * @param routeAnimation A custom animation builder to override the
+     * default "back" animation.
+     */
+    const handleNavigateBack = (defaultHref, routeAnimation) => {
         const config = getConfig();
-        defaultHref = defaultHref ? defaultHref : config && config.get('backButtonDefaultHref');
-        const routeInfo = this.locationHistory.current();
+        defaultHref = defaultHref ?? (config && config.get('backButtonDefaultHref'));
+        const routeInfo = locationHistory.current.current();
+        // It's a linear navigation.
         if (routeInfo && routeInfo.pushedByRoute) {
-            const prevInfo = this.locationHistory.findLastLocation(routeInfo);
+            const prevInfo = locationHistory.current.findLastLocation(routeInfo);
             if (prevInfo) {
                 /**
                  * This needs to be passed to handleNavigate
@@ -792,160 +3409,292 @@ class IonRouterInner extends React.PureComponent {
                  * will be overridden.
                  */
                 const incomingAnimation = routeAnimation || routeInfo.routeAnimation;
-                this.incomingRouteParams = Object.assign(Object.assign({}, prevInfo), { routeAction: 'pop', routeDirection: 'back', routeAnimation: incomingAnimation });
-                if (routeInfo.lastPathname === routeInfo.pushedByRoute ||
-                    /**
-                     * We need to exclude tab switches/tab
-                     * context changes here because tabbed
-                     * navigation is not linear, but router.back()
-                     * will go back in a linear fashion.
-                     */
-                    (prevInfo.pathname === routeInfo.pushedByRoute && routeInfo.tab === '' && prevInfo.tab === '')) {
-                    /**
-                     * history@4.x uses goBack(), history@5.x uses back()
-                     * TODO: If support for React Router <=5 is dropped
-                     * this logic is no longer needed. We can just
-                     * assume back() is available.
-                     */
-                    const history = this.props.history;
-                    const goBack = history.goBack || history.back;
-                    goBack();
+                incomingRouteParams.current = {
+                    ...prevInfo,
+                    routeAction: 'pop',
+                    routeDirection: 'back',
+                    routeAnimation: incomingAnimation,
+                };
+                /**
+                 * Check if it's a simple linear back navigation (not tabbed).
+                 * e.g., `/home` → `/settings` → back to `/home`
+                 */
+                const condition1 = routeInfo.lastPathname === routeInfo.pushedByRoute;
+                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);
+                    navigate(-1);
                 }
                 else {
-                    this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', incomingAnimation);
+                    /**
+                     * It's a non-linear back navigation.
+                     * e.g., direct link or tab switch or nested navigation with redirects
+                     * Clear forward stack since the REPLACE-based navigate resets history
+                     * position, making any prior forward entries unreachable.
+                     */
+                    forwardStack.current = [];
+                    handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', incomingAnimation);
                 }
+                /**
+                 * `pushedByRoute` exists, but no corresponding previous entry in
+                 * the history stack.
+                 */
             }
-            else {
-                this.handleNavigate(defaultHref, 'pop', 'back', routeAnimation);
+            else if (defaultHref) {
+                handleNavigate(defaultHref, 'pop', 'back', routeAnimation);
             }
+            /**
+             * No `pushedByRoute` (e.g., initial page load or tab root).
+             * Navigate to defaultHref so the back button works on direct
+             * deep-link loads (e.g., loading /tab1/child directly).
+             * Only navigate when defaultHref is explicitly set. The core
+             * back-button component hides itself when no defaultHref is
+             * provided, so a click here means the user set one intentionally.
+             */
         }
-        else {
-            this.handleNavigate(defaultHref, 'pop', 'back', routeAnimation);
+        else if (defaultHref) {
+            handleNavigate(defaultHref, 'pop', 'back', routeAnimation);
         }
-    }
-    handleResetTab(tab, originalHref, originalRouteOptions) {
-        const routeInfo = this.locationHistory.getFirstRouteInfoForTab(tab);
-        if (routeInfo) {
-            const newRouteInfo = Object.assign({}, routeInfo);
-            newRouteInfo.pathname = originalHref;
-            newRouteInfo.routeOptions = originalRouteOptions;
-            this.incomingRouteParams = Object.assign(Object.assign({}, newRouteInfo), { routeAction: 'pop', routeDirection: 'back' });
-            this.props.history.push(newRouteInfo.pathname + (newRouteInfo.search || ''));
+    };
+    /**
+     * Used to programmatically navigate through the app.
+     *
+     * @param path The path to navigate to.
+     * @param routeAction The action to take (push, replace, etc.).
+     * @param routeDirection The direction of the navigation (forward,
+     * back, etc.).
+     * @param routeAnimation The animation to use for the transition.
+     * @param routeOptions Additional options for the route.
+     * @param tab The tab to navigate to, if applicable.
+     */
+    const handleNavigate = (path, routeAction, routeDirection, routeAnimation, routeOptions, tab) => {
+        const normalizedRouteDirection = routeAction === 'push' && routeDirection === undefined ? 'forward' : routeDirection;
+        // When navigating from tabs context, we need to determine if the destination
+        // 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.
+        // Uses history-based tab detection instead of URL pattern matching,
+        // so it works with any tab URL structure.
+        if (!tab && currentTab.current && path) {
+            // 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 {
+                        // Destination is outside the current tab context
+                        currentTab.current = undefined;
+                        navigationTab = undefined;
+                    }
+                }
+            }
         }
-    }
-    handleSetCurrentTab(tab) {
-        this.currentTab = tab;
-        const ri = Object.assign({}, this.locationHistory.current());
-        if (ri.tab !== tab) {
-            ri.tab = tab;
-            this.locationHistory.update(ri);
+        // When a replace action targets the same URL as the immediately previous
+        // history entry, using replaceState would create a duplicate browser history
+        // entry (the previous and current entries would both have the same URL).
+        // Navigate back to the previous entry instead to avoid the duplicate.
+        // Keep routeAction as 'replace' so StackManager correctly unmounts the
+        // leaving view through handleLeavingViewUnmount rather than treating it
+        // as a browser-back pop (which preserves views for back/forward history).
+        if (routeAction === 'replace') {
+            const prevEntry = locationHistory.current.previous();
+            const currentEntry = locationHistory.current.current();
+            const prevPath = prevEntry ? prevEntry.pathname + (prevEntry.search || '') : undefined;
+            if (prevEntry && currentEntry && prevEntry !== currentEntry && prevPath === path) {
+                incomingRouteParams.current = {
+                    ...prevEntry,
+                    routeAction: 'replace',
+                    routeDirection: 'back',
+                    routeAnimation,
+                };
+                forwardStack.current.push(currentLocationKeyRef.current);
+                navigate(-1);
+                return;
+            }
         }
-    }
-    render() {
-        return (React.createElement(RouteManagerContext.Provider, { value: this.routeMangerContextState },
-            React.createElement(NavManager, { ionRoute: IonRouteInner, ionRedirect: {}, stackManager: StackManager, routeInfo: this.state.routeInfo, onNativeBack: this.handleNativeBack, onNavigateBack: this.handleNavigateBack, onNavigate: this.handleNavigate, onSetCurrentTab: this.handleSetCurrentTab, onChangeTab: this.handleChangeTab, onResetTab: this.handleResetTab, locationHistory: this.locationHistory }, this.props.children)));
-    }
-}
-const IonRouter = withRouter(IonRouterInner);
+        const baseParams = incomingRouteParams.current ?? {};
+        incomingRouteParams.current = {
+            ...baseParams,
+            routeAction,
+            routeDirection: normalizedRouteDirection,
+            routeOptions,
+            routeAnimation,
+            tab: navigationTab,
+        };
+        navigate(path, { replace: routeAction !== 'push' });
+    };
+    /**
+     * Navigates to a new root path, clearing Ionic's navigation history so that
+     * canGoBack() returns false after the transition. All previously mounted views
+     * are unmounted. Useful for post-login / post-logout root navigation.
+     *
+     * @param pathname The path to navigate to.
+     * @param routeAnimation An optional custom animation builder.
+     */
+    const handleNavigateRoot = (pathname, routeAnimation) => {
+        currentTab.current = undefined;
+        forwardStack.current = [];
+        incomingRouteParams.current = {
+            routeAction: 'replace',
+            routeDirection: 'root',
+            routeAnimation,
+        };
+        navigate(pathname, { replace: true });
+    };
+    const routeMangerContextValue = {
+        canGoBack: () => locationHistory.current.canGoBack(),
+        clearOutlet: viewStack.current.clear,
+        findViewItemByPathname: viewStack.current.findViewItemByPathname,
+        getChildrenToRender: viewStack.current.getChildrenToRender,
+        getViewItemsForOutlet: viewStack.current.getViewItemsForOutlet.bind(viewStack.current),
+        goBack: () => handleNavigateBack(),
+        createViewItem: viewStack.current.createViewItem,
+        findViewItemByRouteInfo: viewStack.current.findViewItemByRouteInfo,
+        findLeavingViewItemByRouteInfo: viewStack.current.findLeavingViewItemByRouteInfo,
+        addViewItem: viewStack.current.add,
+        unMountViewItem: viewStack.current.remove,
+    };
+    return (React.createElement(RouteManagerContext.Provider, { value: routeMangerContextValue },
+        React.createElement(NavManager, { ionRoute: IonRouteInner, stackManager: StackManager, routeInfo: routeInfo, onNativeBack: handleNativeBack, onNavigateBack: handleNavigateBack, onNavigate: handleNavigate, onNavigateRoot: handleNavigateRoot, onSetCurrentTab: handleSetCurrentTab, onChangeTab: handleChangeTab, onResetTab: handleResetTab, locationHistory: locationHistory.current }, children)));
+};
 IonRouter.displayName = 'IonRouter';
 
-class IonReactRouter extends React.Component {
-    constructor(props) {
-        super(props);
-        const { history } = props, rest = __rest(props, ["history"]);
-        this.history = history || createBrowserHistory(rest);
-        this.history.listen(this.handleHistoryChange.bind(this));
-        this.registerHistoryListener = this.registerHistoryListener.bind(this);
-    }
+/**
+ * `IonReactRouter` facilitates the integration of Ionic's specific
+ * navigation and UI management with the standard React Router mechanisms,
+ * allowing an inner Ionic-specific router (`IonRouter`) to react to
+ * navigation events.
+ */
+/**
+ * This component acts as a bridge to ensure React Router hooks like
+ * `useLocation` and `useNavigationType` are called within the valid
+ * context of a `<BrowserRouter>`.
+ *
+ * It was split from `IonReactRouter` because these hooks must be
+ * descendants of a `<Router>` component, which `BrowserRouter` provides.
+ */
+const RouterContent$2 = ({ children }) => {
+    const location = useLocation();
+    const navigationType = useNavigationType();
+    const historyListenHandler = useRef();
+    const registerHistoryListener = useCallback((cb) => {
+        historyListenHandler.current = cb;
+    }, []);
     /**
-     * history@4.x passes separate location and action
-     * params. history@5.x passes location and action
-     * together as a single object.
-     * TODO: If support for React Router <=5 is dropped
-     * this logic is no longer needed. We can just assume
-     * a single object with both location and action.
+     * Processes navigation changes within the application.
+     *
+     * Its purpose is to relay the current `location` and the associated
+     * `action` ('PUSH', 'POP', or 'REPLACE') to any registered listeners,
+     * primarily for `IonRouter` to manage Ionic-specific UI updates and
+     * navigation stack behavior.
+     *
+     * @param loc The current browser history location object.
+     * @param act The type of navigation action ('PUSH', 'POP', or
+     * 'REPLACE').
      */
-    handleHistoryChange(location, action) {
-        const locationValue = location.location || location;
-        const actionValue = location.action || action;
-        if (this.historyListenHandler) {
-            this.historyListenHandler(locationValue, actionValue);
+    const handleHistoryChange = useCallback((loc, act) => {
+        if (historyListenHandler.current) {
+            historyListenHandler.current(loc, act);
         }
-    }
-    registerHistoryListener(cb) {
-        this.historyListenHandler = cb;
-    }
-    render() {
-        const _a = this.props, { children } = _a, props = __rest(_a, ["children"]);
-        return (React.createElement(Router, Object.assign({ history: this.history }, props),
-            React.createElement(IonRouter, { registerHistoryListener: this.registerHistoryListener }, children)));
-    }
-}
+    }, []);
+    useEffect(() => {
+        handleHistoryChange(location, navigationType);
+    }, [location, navigationType, handleHistoryChange]);
+    return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
+};
+const IonReactRouter = ({ children, ...browserRouterProps }) => {
+    return (React.createElement(BrowserRouter, { ...browserRouterProps },
+        React.createElement(RouterContent$2, null, children)));
+};
 
-class IonReactMemoryRouter extends React.Component {
-    constructor(props) {
-        super(props);
-        this.history = props.history;
-        this.history.listen(this.handleHistoryChange.bind(this));
-        this.registerHistoryListener = this.registerHistoryListener.bind(this);
-    }
+/**
+ * `IonReactMemoryRouter` provides a way to use `react-router` in
+ * environments where a traditional browser history (like `BrowserRouter`)
+ * isn't available or desirable.
+ */
+const RouterContent$1 = ({ children }) => {
+    const location = useLocation$1();
+    const navigationType = useNavigationType$1();
+    const historyListenHandler = useRef();
+    const registerHistoryListener = useCallback((cb) => {
+        historyListenHandler.current = cb;
+    }, []);
     /**
-     * history@4.x passes separate location and action
-     * params. history@5.x passes location and action
-     * together as a single object.
-     * TODO: If support for React Router <=5 is dropped
-     * this logic is no longer needed. We can just assume
-     * a single object with both location and action.
+     * Processes navigation changes within the application.
+     *
+     * Its purpose is to relay the current `location` and the associated
+     * `action` ('PUSH', 'POP', or 'REPLACE') to any registered listeners,
+     * primarily for `IonRouter` to manage Ionic-specific UI updates and
+     * navigation stack behavior.
+     *
+     * @param location The current browser history location object.
+     * @param action The type of navigation action ('PUSH', 'POP', or
+     * 'REPLACE').
      */
-    handleHistoryChange(location, action) {
-        const locationValue = location.location || location;
-        const actionValue = location.action || action;
-        if (this.historyListenHandler) {
-            this.historyListenHandler(locationValue, actionValue);
+    const handleHistoryChange = useCallback((loc, act) => {
+        if (historyListenHandler.current) {
+            historyListenHandler.current(loc, act);
         }
-    }
-    registerHistoryListener(cb) {
-        this.historyListenHandler = cb;
-    }
-    render() {
-        const _a = this.props, { children } = _a, props = __rest(_a, ["children"]);
-        return (React.createElement(Router$1, Object.assign({}, props),
-            React.createElement(IonRouter, { registerHistoryListener: this.registerHistoryListener }, children)));
-    }
-}
+    }, []);
+    useEffect(() => {
+        handleHistoryChange(location, navigationType);
+    }, [location, navigationType, handleHistoryChange]);
+    return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
+};
+const IonReactMemoryRouter = ({ children, ...routerProps }) => {
+    return (React.createElement(MemoryRouter, { ...routerProps },
+        React.createElement(RouterContent$1, null, children)));
+};
 
-class IonReactHashRouter extends React.Component {
-    constructor(props) {
-        super(props);
-        const { history } = props, rest = __rest(props, ["history"]);
-        this.history = history || createHashHistory(rest);
-        this.history.listen(this.handleHistoryChange.bind(this));
-        this.registerHistoryListener = this.registerHistoryListener.bind(this);
-    }
+/**
+ * `IonReactHashRouter` provides a way to use hash-based routing in Ionic
+ * React applications.
+ */
+const RouterContent = ({ children }) => {
+    const location = useLocation();
+    const navigationType = useNavigationType();
+    const historyListenHandler = useRef();
+    const registerHistoryListener = useCallback((cb) => {
+        historyListenHandler.current = cb;
+    }, []);
     /**
-     * history@4.x passes separate location and action
-     * params. history@5.x passes location and action
-     * together as a single object.
-     * TODO: If support for React Router <=5 is dropped
-     * this logic is no longer needed. We can just assume
-     * a single object with both location and action.
+     * Processes navigation changes within the application.
+     *
+     * Its purpose is to relay the current `location` and the associated
+     * `action` ('PUSH', 'POP', or 'REPLACE') to any registered listeners,
+     * primarily for `IonRouter` to manage Ionic-specific UI updates and
+     * navigation stack behavior.
+     *
+     * @param location The current browser history location object.
+     * @param action The type of navigation action ('PUSH', 'POP', or
+     * 'REPLACE').
      */
-    handleHistoryChange(location, action) {
-        const locationValue = location.location || location;
-        const actionValue = location.action || action;
-        if (this.historyListenHandler) {
-            this.historyListenHandler(locationValue, actionValue);
+    const handleHistoryChange = useCallback((loc, act) => {
+        if (historyListenHandler.current) {
+            historyListenHandler.current(loc, act);
         }
-    }
-    registerHistoryListener(cb) {
-        this.historyListenHandler = cb;
-    }
-    render() {
-        const _a = this.props, { children } = _a, props = __rest(_a, ["children"]);
-        return (React.createElement(Router, Object.assign({ history: this.history }, props),
-            React.createElement(IonRouter, { registerHistoryListener: this.registerHistoryListener }, children)));
-    }
-}
+    }, []);
+    useEffect(() => {
+        handleHistoryChange(location, navigationType);
+    }, [location, navigationType, handleHistoryChange]);
+    return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
+};
+const IonReactHashRouter = ({ children, ...routerProps }) => {
+    return (React.createElement(HashRouter, { ...routerProps },
+        React.createElement(RouterContent, null, children)));
+};
 
 export { IonReactHashRouter, IonReactMemoryRouter, IonReactRouter };
 //# sourceMappingURL=index.js.map