@ionic/react-router 8.7.12-dev.11764777950.1a565a37 → 8.7.12-dev.11764844107.1b9ced55

package/dist/index.js

@@ -1,1034 +1,176 @@
 import { __rest } from 'tslib';
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { Route, matchPath as matchPath$1, Routes, Navigate, UNSAFE_RouteContext, useLocation, useNavigate, BrowserRouter, useNavigationType, HashRouter } from 'react-router-dom';
-import { ViewStacks, IonRoute, ViewLifeCycleManager, generateId, StackContext, RouteManagerContext, getConfig, LocationHistory, NavManager } from '@ionic/react';
-import { MemoryRouter, useLocation as useLocation$1, useNavigationType as useNavigationType$1 } from 'react-router';
+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';
 
-const IonRouteInner = ({ path, element }) => {
-    return React.createElement(Route, { path: path, element: element });
-};
-
-/**
- * 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 { path, index } = componentProps, restProps = __rest(componentProps, ["path", "index"]);
-    // Handle index routes
-    if (index && !path) {
-        // Index routes match when there's no additional path after the parent route
-        // For example, in a nested outlet at /routing/*, the index route matches
-        // when the relative path is empty (i.e., we're exactly at /routing)
-        // If pathname is empty or just "/", it should match the index route
-        if (pathname === '' || pathname === '/') {
-            return {
-                params: {},
-                pathname: pathname,
-                pathnameBase: pathname || '/',
-                pattern: {
-                    path: '',
-                    caseSensitive: false,
-                    end: true,
-                },
-            };
-        }
-        // Otherwise, index routes don't match when there's additional path
-        return null;
-    }
-    if (!path) {
-        return null;
-    }
-    // For relative paths in nested routes (those that don't start with '/'),
-    // use React Router's matcher against a normalized path.
-    if (!path.startsWith('/')) {
-        const matchOptions = Object.assign({ path: `/${path}` }, restProps);
-        if ((matchOptions === null || matchOptions === void 0 ? void 0 : matchOptions.end) === undefined) {
-            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 Object.assign(Object.assign({}, match), { pathname: pathname, pathnameBase: match.pathnameBase === '/' ? '' : match.pathnameBase.slice(1), pattern: Object.assign(Object.assign({}, match.pattern), { path: path }) });
-        }
-        // No match found
-        return null;
-    }
-    // For absolute paths, use React Router's matcher directly.
-    // 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 = Object.assign({ path }, restProps);
-    if ((matchOptions === null || matchOptions === void 0 ? void 0 : 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) => {
-    var _a;
-    if (!routePath || routePath === '' || routePath.startsWith('/')) {
-        return fullPathname;
-    }
-    const trimmedPath = fullPathname.startsWith('/') ? fullPathname.slice(1) : fullPathname;
-    if (!trimmedPath) {
-        return '';
-    }
-    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;
+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,
             }
-            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 (_a = fullSegments[fullSegments.length - 1]) !== null && _a !== void 0 ? _a : 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 route is a specific match (not wildcard or index).
- *
- * @param route The route element to check.
- * @param remainingPath The remaining path to match against.
- * @returns True if the route specifically matches the remaining path.
+ * @see https://v5.reactrouter.com/web/api/matchPath
  */
-const isSpecificRouteMatch = (route, remainingPath) => {
-    const routePath = route.props.path;
-    const isWildcardOnly = routePath === '*' || routePath === '/*';
-    const isIndex = route.props.index;
-    // Skip wildcards and index routes
-    if (isIndex || isWildcardOnly) {
+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,
+        path,
+        component,
+    };
+    const match = matchPath$1(pathname, matchProps);
+    if (!match) {
         return false;
     }
-    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 };
-};
-/**
- * Computes the parent path for a nested outlet based on the current pathname
- * and the outlet's route configuration.
- *
- * The algorithm finds the shortest parent path where a route matches the remaining path.
- * Priority: specific routes > wildcard routes > index routes (only at mount point)
- *
- * @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 this outlet previously established a mount path and the current
-    // pathname is outside of that scope, do not attempt to re-compute a new
-    // parent path.
-    if (outletMountPath && !currentPathname.startsWith(outletMountPath)) {
-        return { parentPath: undefined, outletMountPath };
-    }
-    if ((hasRelativeRoutes || hasIndexRoute) && currentPathname.includes('/')) {
-        const segments = currentPathname.split('/').filter(Boolean);
-        if (segments.length >= 1) {
-            // Find matches at each level, keeping track of the FIRST (shortest) match
-            let firstSpecificMatch = undefined;
-            let firstWildcardMatch = undefined;
-            let indexMatchAtMount = undefined;
-            for (let i = 1; i <= segments.length; i++) {
-                const parentPath = '/' + segments.slice(0, i).join('/');
-                const remainingPath = segments.slice(i).join('/');
-                // Check for specific (non-wildcard, non-index) route matches
-                const hasSpecificMatch = routeChildren.some((route) => isSpecificRouteMatch(route, remainingPath));
-                if (hasSpecificMatch && !firstSpecificMatch) {
-                    firstSpecificMatch = parentPath;
-                    // Found a specific match - this is our answer for non-index routes
-                    break;
-                }
-                // Check if wildcard would match this remaining path
-                // Only if remaining is non-empty (wildcard needs something to match)
-                if (remainingPath !== '' && remainingPath !== '/' && hasWildcardRoute && !firstWildcardMatch) {
-                    // Check if any specific route could plausibly match this remaining path
-                    const remainingFirstSegment = remainingPath.split('/')[0];
-                    const couldAnyRouteMatch = routeChildren.some((route) => {
-                        const routePath = route.props.path;
-                        if (!routePath || routePath === '*' || routePath === '/*')
-                            return false;
-                        if (route.props.index)
-                            return false;
-                        const routeFirstSegment = routePath.split('/')[0].replace(/[*:]/g, '');
-                        if (!routeFirstSegment)
-                            return false;
-                        // Check for prefix overlap (either direction)
-                        return (routeFirstSegment.startsWith(remainingFirstSegment.slice(0, 3)) ||
-                            remainingFirstSegment.startsWith(routeFirstSegment.slice(0, 3)));
-                    });
-                    // Only save wildcard match if no specific route could match
-                    if (!couldAnyRouteMatch) {
-                        firstWildcardMatch = parentPath;
-                        // Continue looking - might find a specific match at a longer path
-                    }
-                }
-                // Check for index route match when remaining path is empty
-                // BUT only at the outlet's mount path level
-                if ((remainingPath === '' || remainingPath === '/') && hasIndexRoute) {
-                    // Index route matches when current path exactly matches the mount path
-                    // If we already have an outletMountPath, index should only match there
-                    if (outletMountPath) {
-                        if (parentPath === outletMountPath) {
-                            indexMatchAtMount = parentPath;
-                        }
-                    }
-                    else {
-                        // No mount path set yet - index would establish this as mount path
-                        // But only if we haven't found a better match
-                        indexMatchAtMount = parentPath;
-                    }
-                }
-            }
-            // Determine the best parent path:
-            // 1. Specific match (routes like tabs/*, favorites) - highest priority
-            // 2. Wildcard match (route path="*") - catches unmatched segments
-            // 3. Index match - only valid at the outlet's mount point, not deeper
-            let bestPath = undefined;
-            if (firstSpecificMatch) {
-                bestPath = firstSpecificMatch;
-            }
-            else if (firstWildcardMatch) {
-                bestPath = firstWildcardMatch;
-            }
-            else if (indexMatchAtMount) {
-                // Only use index match if no specific or wildcard matched
-                // This handles the case where pathname exactly matches the mount path
-                bestPath = indexMatchAtMount;
-            }
-            // Store the mount path when we first successfully match a route
-            let newOutletMountPath = outletMountPath;
-            if (!outletMountPath && bestPath) {
-                newOutletMountPath = bestPath;
-            }
-            // If we have a mount path, verify the current pathname is within scope
-            if (newOutletMountPath && !currentPathname.startsWith(newOutletMountPath)) {
-                return { parentPath: undefined, outletMountPath: newOutletMountPath };
-            }
-            return { parentPath: bestPath, outletMountPath: newOutletMountPath };
-        }
-    }
-    // Handle outlets with ONLY absolute routes (no relative routes or index routes)
-    // Compute the common prefix of all absolute routes to determine the outlet's scope
-    if (!hasRelativeRoutes && !hasIndexRoute) {
-        const absolutePathRoutes = routeChildren.filter((route) => {
-            const path = route.props.path;
-            return path && path.startsWith('/');
-        });
-        if (absolutePathRoutes.length > 0) {
-            const absolutePaths = absolutePathRoutes.map((r) => r.props.path);
-            const commonPrefix = computeCommonPrefix(absolutePaths);
-            if (commonPrefix && commonPrefix !== '/') {
-                // Set the mount path based on common prefix of absolute routes
-                const newOutletMountPath = outletMountPath || commonPrefix;
-                // Check if current pathname is within scope
-                if (!currentPathname.startsWith(commonPrefix)) {
-                    return { parentPath: undefined, outletMountPath: newOutletMountPath };
-                }
-                return { parentPath: commonPrefix, outletMountPath: newOutletMountPath };
-            }
-        }
-    }
-    return { parentPath: outletMountPath, outletMountPath };
+    return match;
 };
 
-/**
- * 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) => {
-    var _a;
-    const routesChildren = (_a = getRoutesChildren(children)) !== null && _a !== void 0 ? _a : children;
-    return React.Children.toArray(routesChildren).filter((child) => React.isValidElement(child) && child.type === Route);
-};
-/**
- * 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')));
-};
-
-/**
- * Sorts view items by route specificity (most specific first).
- * - Exact matches (no wildcards/params) come first
- * - Among wildcard routes, longer paths are more specific
- *
- * @param views The view items to sort.
- * @returns A new sorted array of view items.
- */
-const sortViewsBySpecificity = (views) => {
-    return [...views].sort((a, b) => {
-        var _a, _b, _c, _d;
-        const pathA = ((_b = (_a = a.routeData) === null || _a === void 0 ? void 0 : _a.childProps) === null || _b === void 0 ? void 0 : _b.path) || '';
-        const pathB = ((_d = (_c = b.routeData) === null || _c === void 0 ? void 0 : _c.childProps) === null || _d === void 0 ? void 0 : _d.path) || '';
-        // Exact matches (no wildcards/params) come first
-        const aHasWildcard = pathA.includes('*') || pathA.includes(':');
-        const bHasWildcard = pathB.includes('*') || pathB.includes(':');
-        if (!aHasWildcard && bHasWildcard)
-            return -1;
-        if (aHasWildcard && !bHasWildcard)
-            return 1;
-        // Among wildcard routes, longer paths are more specific
-        return pathB.length - pathA.length;
-    });
-};
-
-/**
- * `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;
-const createDefaultMatch = (fullPathname, routeProps) => {
-    var _a, _b;
-    const isIndexRoute = !!routeProps.index;
-    const patternPath = (_a = routeProps.path) !== null && _a !== void 0 ? _a : '';
-    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: (_b = routeProps.caseSensitive) !== null && _b !== void 0 ? _b : 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) => {
-    var _a, _b, _c;
-    if (!((_b = (_a = viewItem.routeData) === null || _a === void 0 ? void 0 : _a.childProps) === null || _b === void 0 ? void 0 : _b.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 = (_c = viewItem.routeData) === null || _c === void 0 ? void 0 : _c.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 {
     constructor() {
         super();
-        this.viewItemCounter = 0;
-        /**
-         * Creates a new view item for the given outlet and react route element.
-         * Associates route props with the matched route path for further lookups.
-         */
-        this.createViewItem = (outletId, reactElement, routeInfo, page) => {
-            var _a, _b;
-            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) => {
-                var _a, _b, _c, _d, _e, _f;
-                const existingRouteProps = (_b = (_a = v.reactElement) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {};
-                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 = (_c = existingElement.props) === null || _c === void 0 ? void 0 : _c.to;
-                    const newTo = (_d = newElement.props) === null || _d === void 0 ? void 0 : _d.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 !== '*') {
-                    // For parameterized routes (containing :param), only reuse if the ACTUAL pathname matches
-                    // This ensures /details/1 and /details/2 get separate view items and component instances
-                    const hasParams = routePath.includes(':');
-                    if (hasParams) {
-                        // Check if the existing view item's pathname matches the new pathname
-                        const existingPathname = (_f = (_e = v.routeData) === null || _e === void 0 ? void 0 : _e.match) === null || _f === void 0 ? void 0 : _f.pathname;
-                        if (existingPathname !== routeInfo.pathname) {
-                            return false; // Different param values, don't reuse
-                        }
-                    }
-                    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) ||
-                    ((_a = existingViewItem.routeData) === null || _a === void 0 ? void 0 : _a.match) ||
-                    createDefaultMatch(routeInfo.pathname, reactElement.props);
-                existingViewItem.routeData = {
-                    match: updatedMatch,
-                    childProps: reactElement.props,
-                    lastPathname: (_b = existingViewItem.routeData) === null || _b === void 0 ? void 0 : _b.lastPathname, // Preserve navigation history
-                };
-                return existingViewItem;
-            }
-            this.viewItemCounter++;
-            const id = `${outletId}-${this.viewItemCounter}`;
-            const viewItem = {
-                id,
-                outletId,
-                ionPageElement: page,
-                reactElement,
-                mount: true,
-                ionRoute: true,
-            };
-            if (reactElement.type === IonRoute) {
-                viewItem.disableIonPageManagement = reactElement.props.disableIonPageManagement;
-            }
-            const initialMatch = matchComponent$1(reactElement, routeInfo.pathname, true) ||
-                createDefaultMatch(routeInfo.pathname, reactElement.props);
-            viewItem.routeData = {
-                match: initialMatch,
-                childProps: reactElement.props,
-            };
-            this.add(viewItem);
-            return viewItem;
+        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) {
+        const viewItem = {
+            id: generateId('viewItem'),
+            outletId,
+            ionPageElement: page,
+            reactElement,
+            mount: true,
+            ionRoute: false,
         };
-        /**
-         * 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
-         */
-        this.renderViewItem = (viewItem, routeInfo, parentPath) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            const routePath = viewItem.reactElement.props.path || '';
-            let match = matchComponent$1(viewItem.reactElement, routeInfo.pathname);
-            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 = (_a = viewItem.routeData) === null || _a === void 0 ? void 0 : _a.match;
-            const isSamePath = (match === null || match === void 0 ? void 0 : match.pathname) === (previousMatch === null || previousMatch === void 0 ? void 0 : 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 = (_c = (_b = viewItem.reactElement) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.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 = ((_e = (_d = viewItem.routeData) === null || _d === void 0 ? void 0 : _d.childProps) === null || _e === void 0 ? void 0 : _e.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);
-                    }, 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 ||
-                    ((_f = viewItem.routeData.match) === null || _f === void 0 ? void 0 : _f.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);
-                        }
-                    }, 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
-            if (match && !viewItem.mount && !shouldSkipForDifferentParam) {
-                viewItem.mount = true;
-                viewItem.routeData.match = match;
-            }
-            // Deactivate wildcard routes and catch-all routes (empty path) when we have specific route matches
-            // This prevents "Not found" or fallback pages from showing alongside valid routes
-            if (routePath === '*' || routePath === '') {
-                // Check if any other view in this outlet has a match for the current route
-                const hasSpecificMatch = this.getViewItemsForOutlet(viewItem.outletId).some((v) => {
-                    var _a, _b;
-                    if (v.id === viewItem.id)
-                        return false; // Skip self
-                    const vRoutePath = ((_b = (_a = v.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path) || '';
-                    if (vRoutePath === '*' || vRoutePath === '')
-                        return false; // Skip other wildcard/empty routes
-                    // Check if this view item would match the current route
-                    const vMatch = v.reactElement ? matchComponent$1(v.reactElement, routeInfo.pathname) : null;
-                    return !!vMatch;
-                });
-                if (hasSpecificMatch) {
-                    viewItem.mount = false;
-                    // Also hide the ion-page element immediately to prevent visual overlap
-                    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 ? (_g = viewItem.routeData) === null || _g === void 0 ? void 0 : _g.match : match || ((_h = viewItem.routeData) === null || _h === void 0 ? void 0 : _h.match);
-            return (React.createElement(UNSAFE_RouteContext.Consumer, { key: `view-context-${viewItem.id}` }, (parentContext) => {
-                var _a, _b;
-                const parentMatches = (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.matches) !== null && _a !== void 0 ? _a : [];
-                const accumulatedParentParams = parentMatches.reduce((acc, match) => {
-                    return Object.assign(Object.assign({}, acc), match.params);
-                }, {});
-                const combinedParams = Object.assign(Object.assign({}, accumulatedParentParams), ((_b = routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.params) !== null && _b !== void 0 ? _b : {}));
-                // For relative route paths, we need to compute an absolute pathnameBase
-                // by combining the parent's pathnameBase with the matched portion
-                let absolutePathnameBase = (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathnameBase) || routeInfo.pathname;
-                const routePath = routeElement.props.path;
-                const isRelativePath = routePath && !routePath.startsWith('/');
-                const isIndexRoute = !!routeElement.props.index;
-                if (isRelativePath || isIndexRoute) {
-                    // Get the parent's pathnameBase to build the absolute path
-                    const parentPathnameBase = parentMatches.length > 0 ? parentMatches[parentMatches.length - 1].pathnameBase : '/';
-                    // For relative paths, the matchPath returns a relative pathnameBase
-                    // We need to make it absolute by prepending the parent's base
-                    if ((routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathnameBase) && isRelativePath) {
-                        // Strip leading slash if present in the relative match
-                        const relativeBase = routeMatch.pathnameBase.startsWith('/')
-                            ? routeMatch.pathnameBase.slice(1)
-                            : routeMatch.pathnameBase;
-                        absolutePathnameBase =
-                            parentPathnameBase === '/' ? `/${relativeBase}` : `${parentPathnameBase}/${relativeBase}`;
-                    }
-                    else if (isIndexRoute) {
-                        // Index routes should use the parent's base as their base
-                        absolutePathnameBase = parentPathnameBase;
-                    }
-                }
-                const contextMatches = [
-                    ...parentMatches,
-                    {
-                        params: combinedParams,
-                        pathname: (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathname) || routeInfo.pathname,
-                        pathnameBase: absolutePathnameBase,
-                        route: {
-                            id: viewItem.id,
-                            path: routeElement.props.path,
-                            element: componentElement,
-                            index: !!routeElement.props.index,
-                            caseSensitive: routeElement.props.caseSensitive,
-                            hasErrorBoundary: false,
-                        },
-                    },
-                ];
-                const routeContextValue = parentContext
-                    ? Object.assign(Object.assign({}, parentContext), { matches: contextMatches }) : {
-                    outlet: null,
-                    matches: contextMatches,
-                    isDataRoute: false,
-                };
-                return (React.createElement(ViewLifeCycleManager, { key: `view-${viewItem.id}`, mount: viewItem.mount, removeView: () => this.remove(viewItem) },
-                    React.createElement(UNSAFE_RouteContext.Provider, { value: routeContextValue }, componentElement)));
-            }));
+        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,
         };
-        /**
-         * 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
-         */
-        this.getChildrenToRender = (outletId, ionRouterOutlet, routeInfo) => {
-            const viewItems = this.getViewItemsForOutlet(outletId);
-            // Determine parentPath for nested outlets to properly evaluate index routes
-            let parentPath = undefined;
-            try {
-                // Only attempt parent path computation for non-root outlets
-                if (outletId !== 'routerOutlet') {
-                    const routeChildren = extractRouteChildren(ionRouterOutlet.props.children);
-                    const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
-                    if (hasRelativeRoutes || hasIndexRoute) {
-                        const result = computeParentPath({
-                            currentPathname: routeInfo.pathname,
-                            outletMountPath: undefined,
-                            routeChildren,
-                            hasRelativeRoutes,
-                            hasIndexRoute,
-                            hasWildcardRoute,
-                        });
-                        parentPath = result.parentPath;
-                    }
-                }
-            }
-            catch (e) {
-                // Non-fatal: if we fail to compute parentPath, fall back to previous behavior
-            }
-            // Sync child elements with stored viewItems (e.g. to reflect new props)
-            React.Children.forEach(ionRouterOutlet.props.children, (child) => {
-                // Ensure the child is a valid React element since we
-                // might have whitespace strings or other non-element children
-                if (React.isValidElement(child)) {
-                    // Find view item by exact path match to avoid wildcard routes overwriting specific routes
-                    const childPath = child.props.path;
-                    const viewItem = viewItems.find((v) => {
-                        var _a, _b;
-                        const viewItemPath = (_b = (_a = v.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
-                        // Only update if paths match exactly (prevents wildcard routes from overwriting specific routes)
-                        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) => {
-                var _a, _b, _c, _d;
-                const elementComponent = (_b = (_a = viewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.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 = (_d = (_c = viewItem.reactElement) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.path;
-                    if (viewRoutePath) {
-                        // First try exact match using matchComponent
-                        const routeMatch = matchComponent$1(viewItem.reactElement, routeInfo.pathname);
-                        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);
-                            }, 0);
-                            return false;
-                        }
-                    }
-                }
-                return true;
+        return viewItem;
+    }
+    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);
             });
-            const renderedItems = renderableViewItems.map((viewItem) => this.renderViewItem(viewItem, routeInfo, parentPath));
-            return renderedItems;
-        };
-        /**
-         * Finds a view item matching the current route, optionally updating its match state.
-         */
-        this.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;
+            if (viewItem) {
+                viewItem.reactElement = child;
             }
-            return viewItem;
-        };
-        /**
-         * Finds the view item that was previously active before a route change.
-         */
-        this.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.
-         */
-        this.findViewItemByPathname = (pathname, outletId) => {
-            const { viewItem } = this.findViewItemByPath(pathname, outletId);
-            return viewItem;
-        };
-        /**
-         * Clean up old, unmounted view items to prevent memory leaks
-         */
-        this.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);
-                });
+        });
+        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,
+                })));
             }
-        };
-        /**
-         * 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)
-         */
-        this.add = (viewItem) => {
-            const existingViewItem = this.getViewItemsForOutlet(viewItem.outletId).find((v) => v.id === viewItem.id);
-            if (existingViewItem) {
-                return;
+            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;
+                }
             }
-            super.add(viewItem);
-            this.cleanupStaleViewItems(viewItem.outletId);
-        };
-        /**
-         * Override remove
-         */
-        this.remove = (viewItem) => {
-            super.remove(viewItem);
-        };
+            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;
     }
     /**
-     * Core function that matches a given pathname against all view items.
-     * Returns both the matched view item and match metadata.
+     * Returns the matching view item and the match result for a given pathname.
      */
-    findViewItemByPath(pathname, outletId, mustBeIonRoute, allowDefaultMatch = true) {
+    findViewItemByPath(pathname, outletId, mustBeIonRoute) {
         let viewItem;
-        let match = null;
+        let match;
         let viewStack;
         if (outletId) {
-            viewStack = sortViewsBySpecificity(this.getViewItemsForOutlet(outletId));
+            viewStack = this.getViewItemsForOutlet(outletId);
             viewStack.some(matchView);
-            if (!viewItem && allowDefaultMatch)
+            if (!viewItem) {
                 viewStack.some(matchDefaultRoute);
+            }
         }
         else {
-            const viewItems = sortViewsBySpecificity(this.getAllViewItems());
+            const viewItems = this.getAllViewItems();
             viewItems.some(matchView);
-            if (!viewItem && allowDefaultMatch)
+            if (!viewItem) {
                 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) {
-            var _a;
-            if (mustBeIonRoute && !v.ionRoute)
+            var _a, _b;
+            if (mustBeIonRoute && !v.ionRoute) {
                 return false;
-            const viewItemPath = v.routeData.childProps.path || '';
-            const isIndexRoute = !!v.routeData.childProps.index;
-            const previousMatch = (_a = v.routeData) === null || _a === void 0 ? void 0 : _a.match;
-            const result = v.reactElement ? matchComponent$1(v.reactElement, pathname) : null;
-            if (!result) {
-                const indexMatch = resolveIndexRouteMatch(v, pathname, undefined);
-                if (indexMatch) {
-                    match = indexMatch;
-                    viewItem = v;
-                    return true;
-                }
             }
-            if (result) {
-                const hasParams = result.params && Object.keys(result.params).length > 0;
-                const isSamePath = result.pathname === (previousMatch === null || previousMatch === void 0 ? void 0 : previousMatch.pathname);
-                // 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, never reuse if the pathname is different
-                // This ensures /details/1 and /details/2 get separate view items
-                const isParameterRoute = viewItemPath.includes(':');
-                if (isParameterRoute && !isSamePath) {
-                    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 wildcard routes, only reuse if the pathname exactly matches
-                const isWildcardRoute = viewItemPath.includes('*');
-                if (isWildcardRoute && isSamePath) {
-                    match = result;
+            match = matchPath({
+                pathname,
+                componentProps: v.routeData.childProps,
+            });
+            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;
                 }
             }
             return false;
         }
-        /**
-         * Matches a view with no path prop (default fallback route) or index route.
-         */
         function matchDefaultRoute(v) {
-            var _a;
-            const childProps = v.routeData.childProps;
-            const isDefaultRoute = childProps.path === undefined || childProps.path === '';
-            const isIndexRoute = !!childProps.index;
-            if (isIndexRoute) {
-                const indexMatch = resolveIndexRouteMatch(v, pathname, undefined);
-                if (indexMatch) {
-                    match = indexMatch;
-                    viewItem = v;
-                    return true;
-                }
-                return false;
-            }
-            if (isDefaultRoute) {
+            // 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: {},
-                    pathname,
-                    pathnameBase: pathname === '' ? '/' : pathname,
-                    pattern: {
-                        path: '',
-                        caseSensitive: (_a = childProps.caseSensitive) !== null && _a !== void 0 ? _a : false,
-                        end: true,
-                    },
                 };
                 viewItem = v;
                 return true;
@@ -1037,29 +179,11 @@ class ReactRouterViewStack extends ViewStacks {
         }
     }
 }
-/**
- * Utility to apply matchPath to a React element and return its match state.
- */
-function matchComponent$1(node, pathname, allowFallback = false) {
-    var _a;
-    const routeProps = (_a = node === null || node === void 0 ? void 0 : node.props) !== null && _a !== void 0 ? _a : {};
-    const routePath = routeProps.path;
-    const pathnameToMatch = derivePathnameToMatch(pathname, routePath);
-    const match = matchPath({
-        pathname: pathnameToMatch,
-        componentProps: routeProps,
+function matchComponent$1(node, pathname) {
+    return matchPath({
+        pathname,
+        componentProps: node.props,
     });
-    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) {
@@ -1084,40 +208,7 @@ function clonePageElement(leavingViewHtml) {
     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 in milliseconds to wait for an IonPage element to be mounted before
- * proceeding with a page transition.
- */
-const ION_PAGE_WAIT_TIMEOUT_MS = 50;
 const isViewVisible = (el) => !el.classList.contains('ion-page-invisible') && !el.classList.contains('ion-page-hidden');
-/**
- * Hides an ion-page element by adding hidden class and aria attribute.
- */
-const hideIonPageElement = (element) => {
-    if (element) {
-        element.classList.add('ion-page-hidden');
-        element.setAttribute('aria-hidden', 'true');
-    }
-};
-/**
- * Shows an ion-page element by removing hidden class and aria attribute.
- */
-const showIonPageElement = (element) => {
-    if (element) {
-        element.classList.remove('ion-page-hidden');
-        element.removeAttribute('aria-hidden');
-    }
-};
 class StackManager extends React.PureComponent {
     constructor(props) {
         super(props);
@@ -1126,314 +217,12 @@ class StackManager extends React.PureComponent {
             isInOutlet: () => true,
         };
         this.pendingPageTransition = false;
-        this.waitingForIonPage = false;
-        this.outletMountPath = undefined;
         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;
-    }
-    /**
-     * Determines the parent path that was matched to reach this outlet.
-     * This helps with nested routing in React Router 6.
-     *
-     * The algorithm finds the shortest parent path where a route matches the remaining path.
-     * Priority: specific routes > wildcard routes > index routes (only at mount point)
-     */
-    getParentPath() {
-        const currentPathname = this.props.routeInfo.pathname;
-        // If this outlet previously established a mount path and the current
-        // pathname is outside of that scope, do not attempt to re-compute a new
-        // parent path. This prevents out-of-scope outlets from "adopting"
-        // unrelated routes (e.g., matching their index route under /overlays).
-        if (this.outletMountPath && !currentPathname.startsWith(this.outletMountPath)) {
-            return undefined;
-        }
-        // If this is a nested outlet (has an explicit ID like "main"),
-        // we need to figure out what part of the path was already matched
-        if (this.id !== 'routerOutlet' && this.ionRouterOutlet) {
-            const routeChildren = extractRouteChildren(this.ionRouterOutlet.props.children);
-            const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
-            const result = computeParentPath({
-                currentPathname,
-                outletMountPath: this.outletMountPath,
-                routeChildren,
-                hasRelativeRoutes,
-                hasIndexRoute,
-                hasWildcardRoute,
-            });
-            // Update the outlet mount path if it was set
-            if (result.outletMountPath && !this.outletMountPath) {
-                this.outletMountPath = result.outletMountPath;
-            }
-            return result.parentPath;
-        }
-        return this.outletMountPath;
-    }
-    /**
-     * Finds the entering and leaving view items for a route transition,
-     * handling special redirect cases.
-     */
-    findViewItems(routeInfo) {
-        const enteringViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id);
-        let leavingViewItem = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id);
-        // If we don't have a leaving view item, but the route info indicates
-        // that the user has routed from a previous path, then the leaving view
-        // can be found by the last known pathname.
-        if (!leavingViewItem && routeInfo.prevRouteLastPathname) {
-            leavingViewItem = this.context.findViewItemByPathname(routeInfo.prevRouteLastPathname, this.id);
-        }
-        // Special case for redirects: When a redirect happens inside a nested route,
-        // the entering and leaving view might be the same (the container route like tabs/*).
-        // In this case, we need to look at prevRouteLastPathname to find the actual
-        // view we're transitioning away from.
-        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;
-            }
-        }
-        // Also check if we're in a redirect scenario where entering and leaving are different
-        // but we still need to handle the actual previous 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 };
-    }
-    /**
-     * Determines if the leaving view item should be unmounted after a transition.
-     */
-    shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem) {
-        if (!leavingViewItem) {
-            return false;
-        }
-        if (routeInfo.routeAction === 'replace') {
-            return true;
-        }
-        const isForwardPush = routeInfo.routeAction === 'push' && routeInfo.routeDirection === 'forward';
-        if (!isForwardPush && routeInfo.routeDirection !== 'none' && enteringViewItem !== leavingViewItem) {
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Handles the case when the outlet is out of scope (current route is outside mount path).
-     * Returns true if the transition should be aborted.
-     */
-    handleOutOfScopeOutlet(routeInfo) {
-        if (!this.outletMountPath || routeInfo.pathname.startsWith(this.outletMountPath)) {
-            return false;
-        }
-        // Clear any pending unmount timeout to avoid conflicts
-        if (this.outOfScopeUnmountTimeout) {
-            clearTimeout(this.outOfScopeUnmountTimeout);
-            this.outOfScopeUnmountTimeout = undefined;
-        }
-        // When an outlet is out of scope, unmount its views immediately
-        const allViewsInOutlet = this.context.getViewItemsForOutlet ? this.context.getViewItemsForOutlet(this.id) : [];
-        // Unmount and remove all views in this outlet immediately to avoid leftover content
-        allViewsInOutlet.forEach((viewItem) => {
-            hideIonPageElement(viewItem.ionPageElement);
-            this.context.unMountViewItem(viewItem);
-        });
-        this.forceUpdate();
-        return true;
-    }
-    /**
-     * Handles the case when this is a nested outlet with relative routes but no valid parent path.
-     * Returns true if the transition should be aborted.
-     */
-    handleOutOfContextNestedOutlet(parentPath, leavingViewItem) {
-        var _a;
-        if (this.id === 'routerOutlet' || parentPath !== undefined || !this.ionRouterOutlet) {
-            return false;
-        }
-        const routesChildren = (_a = getRoutesChildren(this.ionRouterOutlet.props.children)) !== null && _a !== void 0 ? _a : this.ionRouterOutlet.props.children;
-        const routeChildren = React.Children.toArray(routesChildren).filter((child) => React.isValidElement(child) && child.type === Route);
-        const hasRelativeRoutes = routeChildren.some((route) => {
-            const path = route.props.path;
-            return path && !path.startsWith('/') && path !== '*';
-        });
-        if (hasRelativeRoutes) {
-            // Hide any visible views in this outlet since it's out of scope
-            hideIonPageElement(leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.ionPageElement);
-            if (leavingViewItem) {
-                leavingViewItem.mount = false;
-            }
-            this.forceUpdate();
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Handles the case when a nested outlet has no matching route.
-     * Returns true if the transition should be aborted.
-     */
-    handleNoMatchingRoute(enteringRoute, enteringViewItem, leavingViewItem) {
-        if (this.id === 'routerOutlet' || enteringRoute || enteringViewItem) {
-            return false;
-        }
-        // Hide any visible views in this outlet since it has no matching route
-        hideIonPageElement(leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.ionPageElement);
-        if (leavingViewItem) {
-            leavingViewItem.mount = false;
-        }
-        this.forceUpdate();
-        return true;
-    }
-    /**
-     * Handles the transition when entering view item has an ion-page element ready.
-     */
-    handleReadyEnteringView(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem) {
-        var _a, _b;
-        // Ensure the entering view is not hidden from previous navigations
-        showIonPageElement(enteringViewItem.ionPageElement);
-        // Handle same view item case (e.g., parameterized route changes)
-        if (enteringViewItem === leavingViewItem) {
-            const routePath = (_b = (_a = enteringViewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
-            const isParameterizedRoute = routePath ? routePath.includes(':') : false;
-            if (isParameterizedRoute) {
-                // Refresh match metadata so the component receives updated params
-                const updatedMatch = matchComponent(enteringViewItem.reactElement, routeInfo.pathname, true);
-                if (updatedMatch) {
-                    enteringViewItem.routeData.match = updatedMatch;
-                }
-                const enteringEl = enteringViewItem.ionPageElement;
-                if (enteringEl) {
-                    enteringEl.classList.remove('ion-page-hidden', 'ion-page-invisible');
-                    enteringEl.removeAttribute('aria-hidden');
-                }
-                this.forceUpdate();
-                return;
-            }
-        }
-        // Try to find leaving view using prev route info if still not found
-        if (!leavingViewItem && this.props.routeInfo.prevRouteLastPathname) {
-            leavingViewItem = this.context.findViewItemByPathname(this.props.routeInfo.prevRouteLastPathname, this.id);
-        }
-        // Skip transition if entering view is visible and leaving view is not
-        if (enteringViewItem.ionPageElement &&
-            isViewVisible(enteringViewItem.ionPageElement) &&
-            leavingViewItem !== undefined &&
-            leavingViewItem.ionPageElement &&
-            !isViewVisible(leavingViewItem.ionPageElement)) {
-            return;
-        }
-        // Check for duplicate transition
-        const currentTransition = {
-            enteringId: enteringViewItem.id,
-            leavingId: leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.id,
-        };
-        if (leavingViewItem &&
-            this.lastTransition &&
-            this.lastTransition.leavingId &&
-            this.lastTransition.enteringId === currentTransition.enteringId &&
-            this.lastTransition.leavingId === currentTransition.leavingId) {
-            return;
-        }
-        this.lastTransition = currentTransition;
-        this.transitionPage(routeInfo, enteringViewItem, leavingViewItem);
-        // Handle unmounting the leaving view
-        if (shouldUnmountLeavingViewItem && leavingViewItem && enteringViewItem !== leavingViewItem) {
-            leavingViewItem.mount = false;
-            this.handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem);
-        }
-    }
-    /**
-     * Handles the delayed unmount of the leaving view item after a replace action.
-     */
-    handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem) {
-        var _a, _b, _c, _d, _e, _f;
-        if (routeInfo.routeAction !== 'replace' || !leavingViewItem.ionPageElement) {
-            return;
-        }
-        // Check if we should skip removal for nested outlet redirects
-        const enteringRoutePath = (_b = (_a = enteringViewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
-        const leavingRoutePath = (_d = (_c = leavingViewItem.reactElement) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.path;
-        const isEnteringContainerRoute = enteringRoutePath && enteringRoutePath.endsWith('/*');
-        const isLeavingSpecificRoute = leavingRoutePath &&
-            leavingRoutePath !== '' &&
-            leavingRoutePath !== '*' &&
-            !leavingRoutePath.endsWith('/*') &&
-            !((_f = (_e = leavingViewItem.reactElement) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.index);
-        // Skip removal only for container-to-container transitions
-        if (isEnteringContainerRoute && !isLeavingSpecificRoute) {
-            return;
-        }
-        const viewToUnmount = leavingViewItem;
-        setTimeout(() => {
-            this.context.unMountViewItem(viewToUnmount);
-        }, VIEW_UNMOUNT_DELAY_MS);
-    }
-    /**
-     * Handles the case when entering view has no ion-page element yet (waiting for render).
-     */
-    handleWaitingForIonPage(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem) {
-        var _a, _b;
-        const enteringRouteElement = (_b = (_a = enteringViewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.element;
-        // Handle Navigate components (they never render an IonPage)
-        if (isNavigateElement(enteringRouteElement)) {
-            this.waitingForIonPage = false;
-            if (this.ionPageWaitTimeout) {
-                clearTimeout(this.ionPageWaitTimeout);
-                this.ionPageWaitTimeout = undefined;
-            }
-            this.pendingPageTransition = false;
-            // Hide the leaving view immediately for Navigate redirects
-            hideIonPageElement(leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.ionPageElement);
-            // Don't unmount if entering and leaving are the same view item
-            if (shouldUnmountLeavingViewItem && leavingViewItem && enteringViewItem !== leavingViewItem) {
-                leavingViewItem.mount = false;
-            }
-            this.forceUpdate();
-            return;
-        }
-        // Hide leaving view while we wait for the entering view's IonPage to mount
-        hideIonPageElement(leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.ionPageElement);
-        this.waitingForIonPage = true;
-        if (this.ionPageWaitTimeout) {
-            clearTimeout(this.ionPageWaitTimeout);
-        }
-        this.ionPageWaitTimeout = setTimeout(() => {
-            var _a, _b;
-            this.ionPageWaitTimeout = undefined;
-            if (!this.waitingForIonPage) {
-                return;
-            }
-            this.waitingForIonPage = false;
-            const latestEnteringView = (_a = this.context.findViewItemByRouteInfo(routeInfo, this.id)) !== null && _a !== void 0 ? _a : enteringViewItem;
-            const latestLeavingView = (_b = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id)) !== null && _b !== void 0 ? _b : leavingViewItem;
-            if (latestEnteringView === null || latestEnteringView === void 0 ? void 0 : latestEnteringView.ionPageElement) {
-                this.transitionPage(routeInfo, latestEnteringView, latestLeavingView !== null && latestLeavingView !== void 0 ? latestLeavingView : undefined);
-                if (shouldUnmountLeavingViewItem && latestLeavingView && latestEnteringView !== latestLeavingView) {
-                    latestLeavingView.mount = false;
-                }
-                this.forceUpdate();
-            }
-        }, ION_PAGE_WAIT_TIMEOUT_MS);
-        this.forceUpdate();
-    }
-    /**
-     * 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 || '' };
+        this.id = generateId('routerOutlet');
+        this.prevProps = undefined;
+        this.skipTransition = false;
     }
     componentDidMount() {
         if (this.clearOutletTimeout) {
@@ -1466,123 +255,114 @@ class StackManager extends React.PureComponent {
         }
     }
     componentWillUnmount() {
-        if (this.ionPageWaitTimeout) {
-            clearTimeout(this.ionPageWaitTimeout);
-            this.ionPageWaitTimeout = undefined;
-        }
-        if (this.outOfScopeUnmountTimeout) {
-            clearTimeout(this.outOfScopeUnmountTimeout);
-            this.outOfScopeUnmountTimeout = undefined;
-        }
-        this.waitingForIonPage = false;
-        // 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.context.getViewItemsForOutlet(this.id) : [];
-        allViewsInOutlet.forEach((viewItem) => {
-            hideIonPageElement(viewItem.ionPageElement);
-        });
         this.clearOutletTimeout = 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;
-        // Wait for router outlet to mount
+        var _a, _b;
         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;
-        }
-        // Find entering and leaving view items
-        const viewItems = this.findViewItems(routeInfo);
-        let enteringViewItem = viewItems.enteringViewItem;
-        const leavingViewItem = viewItems.leavingViewItem;
-        const 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;
-        }
-        // 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((_a = this.ionRouterOutlet) === null || _a === void 0 ? void 0 : _a.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
-        if (enteringViewItem && enteringViewItem.ionPageElement) {
-            // Clear waiting state
-            if (this.waitingForIonPage) {
-                this.waitingForIonPage = false;
-            }
-            if (this.ionPageWaitTimeout) {
-                clearTimeout(this.ionPageWaitTimeout);
-                this.ionPageWaitTimeout = undefined;
+        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);
             }
-            this.handleReadyEnteringView(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem);
-        }
-        else if (enteringViewItem && !enteringViewItem.ionPageElement) {
-            // Wait for ion-page to mount
-            this.handleWaitingForIonPage(routeInfo, enteringViewItem, leavingViewItem, shouldUnmountLeavingViewItem);
-            return;
-        }
-        else if (!enteringViewItem && !enteringRoute) {
-            // No view or route found - likely leaving to another outlet
+            // Check if leavingViewItem should be unmounted
             if (leavingViewItem) {
-                hideIonPageElement(leavingViewItem.ionPageElement);
-                if (shouldUnmountLeavingViewItem) {
+                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;
                 }
             }
+            const enteringRoute = matchRoute((_b = this.ionRouterOutlet) === null || _b === void 0 ? void 0 : _b.props.children, routeInfo);
+            if (enteringViewItem) {
+                enteringViewItem.reactElement = enteringRoute;
+            }
+            else if (enteringRoute) {
+                enteringViewItem = this.context.createViewItem(this.id, enteringRoute, routeInfo);
+                this.context.addViewItem(enteringViewItem);
+            }
+            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;
+                }
+                /**
+                 * 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');
+                }
+                // }, 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) {
-        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;
@@ -1599,38 +379,48 @@ class StackManager extends React.PureComponent {
         }
         this.handlePageTransition(routeInfo);
     }
-    /**
-     * Configures the router outlet for the swipe-to-go-back gesture.
-     *
-     * @param routerOutlet The Ionic router outlet component: `<IonRouterOutlet>`.
-     */
     async setupRouterOutlet(routerOutlet) {
         const canStart = () => {
             const config = getConfig();
-            // Check if swipe back is enabled in config (default to true for iOS mode)
             const swipeEnabled = config && config.get('swipeBackEnabled', routerOutlet.mode === 'ios');
             if (!swipeEnabled) {
                 return false;
             }
             const { routeInfo } = this.props;
-            const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
-            const enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
-            const canStartSwipe = !!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.
+            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 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.pattern.path !== routeInfo.pathname;
-            return canStartSwipe;
+                /**
+                 * 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 onStart = async () => {
             const { routeInfo } = this.props;
-            const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
-            const enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
+            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 leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id, false);
-            // When the gesture starts, kick off a transition controlled via swipe gesture
+            /**
+             * When the gesture starts, kick off
+             * a transition that is controlled
+             * via a swipe gesture.
+             */
             if (enteringViewItem && leavingViewItem) {
                 await this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back', true);
             }
@@ -1638,19 +428,34 @@ class StackManager extends React.PureComponent {
         };
         const onEnd = (shouldContinue) => {
             if (shouldContinue) {
-                // User finished the swipe gesture, so complete the back navigation
                 this.skipTransition = true;
                 this.context.goBack();
             }
             else {
-                // Swipe gesture was aborted - re-hide the page that was going to enter
+                /**
+                 * In the event that the swipe
+                 * gesture was aborted, we should
+                 * re-hide the page that was going to enter.
+                 */
                 const { routeInfo } = this.props;
-                const swipeBackRouteInfo = this.getSwipeBackRouteInfo();
-                const enteringViewItem = this.context.findViewItemByRouteInfo(swipeBackRouteInfo, this.id, false);
+                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 leavingViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id, false);
-                // Don't hide if entering and leaving are the same (parameterized route edge case)
+                /**
+                 * 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) {
-                    hideIonPageElement(enteringViewItem.ionPageElement);
+                    const { ionPageElement } = enteringViewItem;
+                    ionPageElement.setAttribute('aria-hidden', 'true');
+                    ionPageElement.classList.add('ion-page-hidden');
                 }
             }
         };
@@ -1660,18 +465,6 @@ class StackManager extends React.PureComponent {
             onEnd,
         };
     }
-    /**
-     * 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`.
-     */
     async transitionPage(routeInfo, enteringViewItem, leavingViewItem, direction, progressAnimation = false) {
         const runCommit = async (enteringEl, leavingEl) => {
             const skipTransition = this.skipTransition;
@@ -1717,8 +510,7 @@ class StackManager extends React.PureComponent {
             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
-                // (e.g., `/user/1` → `/user/2`)
-                const match = matchComponent(leavingViewItem.reactElement, routeInfo.pathname);
+                const match = matchComponent(leavingViewItem.reactElement, routeInfo.pathname, true);
                 if (match) {
                     const newLeavingElement = clonePageElement(leavingViewItem.ionPageElement.outerHTML);
                     if (newLeavingElement) {
@@ -1728,15 +520,6 @@ class StackManager extends React.PureComponent {
                     }
                 }
                 else {
-                    /**
-                     * The route no longer matches the component type of the leaving view.
-                     * (e.g., `/user/1` → `/settings`)
-                     *
-                     * This can also occur in edge cases like rapid navigation
-                     * or during parent component re-renders that briefly cause
-                     * the view items to be the same instance before the final
-                     * route component is determined.
-                     */
                     await runCommit(enteringViewItem.ionPageElement, undefined);
                 }
             }
@@ -1752,25 +535,20 @@ 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, () => {
-            // Callback triggers re-render when view items are modified during getChildrenToRender
             this.forceUpdate();
         });
         return (React.createElement(StackContext.Provider, { value: this.stackContextValue }, React.cloneElement(ionRouterOutlet, {
             ref: (node) => {
                 if (ionRouterOutlet.props.setRef) {
-                    // Needed to handle external refs from devs.
                     ionRouterOutlet.props.setRef(node);
                 }
                 if (ionRouterOutlet.props.forwardedRef) {
-                    // Needed to handle external refs from devs.
                     ionRouterOutlet.props.forwardedRef.current = node;
                 }
                 this.routerOutletElement = node;
                 const { ref } = ionRouterOutlet;
-                // Check for legacy refs.
                 if (typeof ref === 'function') {
                     ref(node);
                 }
@@ -1781,351 +559,169 @@ class StackManager extends React.PureComponent {
         return RouteManagerContext;
     }
 }
-/**
- * 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) {
-    var _a;
+function matchRoute(node, routeInfo) {
     let matchedNode;
-    let fallbackNode;
-    // `<Route />` nodes are rendered inside of a <Routes /> node
-    const routesChildren = (_a = getRoutesChildren(node)) !== null && _a !== void 0 ? _a : node;
-    // Collect all route children
-    const routeChildren = React.Children.toArray(routesChildren).filter((child) => React.isValidElement(child) && child.type === Route);
-    // Sort routes by specificity (most specific first)
-    const sortedRoutes = routeChildren.sort((a, b) => {
-        const pathA = a.props.path || '';
-        const pathB = b.props.path || '';
-        // Index routes come first
-        if (a.props.index && !b.props.index)
-            return -1;
-        if (!a.props.index && b.props.index)
-            return 1;
-        // Wildcard-only routes (*) should come LAST
-        const aIsWildcardOnly = pathA === '*';
-        const bIsWildcardOnly = pathB === '*';
-        if (!aIsWildcardOnly && bIsWildcardOnly)
-            return -1;
-        if (aIsWildcardOnly && !bIsWildcardOnly)
-            return 1;
-        // Exact matches (no wildcards/params) come before wildcard/param routes
-        const aHasWildcard = pathA.includes('*') || pathA.includes(':');
-        const bHasWildcard = pathB.includes('*') || pathB.includes(':');
-        if (!aHasWildcard && bHasWildcard)
-            return -1;
-        if (aHasWildcard && !bHasWildcard)
-            return 1;
-        // Among routes with same wildcard status, longer paths are more specific
-        if (pathA.length !== pathB.length) {
-            return pathB.length - pathA.length;
-        }
-        return 0;
-    });
-    // For nested routes in React Router 6, we need to extract the relative path
-    // that this outlet should be responsible for matching
-    let pathnameToMatch = routeInfo.pathname;
-    // Check if we have relative routes (routes that don't start with '/')
-    const hasRelativeRoutes = sortedRoutes.some((r) => r.props.path && !r.props.path.startsWith('/'));
-    const hasIndexRoute = sortedRoutes.some((r) => r.props.index);
-    // SIMPLIFIED: Trust React Router 6's matching more, compute relative path when parent is known
-    if ((hasRelativeRoutes || hasIndexRoute) && parentPath) {
-        const parentPrefix = parentPath.replace('/*', '');
-        const normalizedParent = stripTrailingSlash(parentPrefix);
-        const normalizedPathname = stripTrailingSlash(routeInfo.pathname);
-        // Only compute relative path if pathname is within parent scope
-        if (normalizedPathname.startsWith(normalizedParent + '/') || normalizedPathname === normalizedParent) {
-            const pathSegments = routeInfo.pathname.split('/').filter(Boolean);
-            const parentSegments = normalizedParent.split('/').filter(Boolean);
-            const relativeSegments = pathSegments.slice(parentSegments.length);
-            pathnameToMatch = relativeSegments.join('/'); // Empty string is valid for index routes
-        }
-    }
-    // Find the first matching route
-    for (const child of sortedRoutes) {
+    React.Children.forEach(node, (child) => {
         const match = matchPath({
-            pathname: pathnameToMatch,
+            pathname: routeInfo.pathname,
             componentProps: child.props,
         });
         if (match) {
             matchedNode = child;
-            break;
         }
-    }
+    });
     if (matchedNode) {
         return matchedNode;
     }
-    // If we haven't found a node, try to find one that doesn't have a path prop (fallback route)
-    // BUT only return the fallback if the current pathname is within the outlet's scope.
-    // For outlets with absolute paths, compute the common prefix to determine scope.
-    const absolutePathRoutes = routeChildren.filter((r) => r.props.path && r.props.path.startsWith('/'));
-    // Determine if pathname is within scope before returning fallback
-    let isPathnameInScope = true;
-    if (absolutePathRoutes.length > 0) {
-        // Find common prefix of all absolute paths to determine outlet scope
-        const absolutePaths = absolutePathRoutes.map((r) => r.props.path);
-        const commonPrefix = computeCommonPrefix(absolutePaths);
-        // If we have a common prefix, check if the current pathname is within that scope
-        if (commonPrefix && commonPrefix !== '/') {
-            isPathnameInScope = routeInfo.pathname.startsWith(commonPrefix);
-        }
-    }
-    // Only look for fallback route if pathname is within scope
-    if (isPathnameInScope) {
-        for (const child of routeChildren) {
-            if (!child.props.path) {
-                fallbackNode = child;
-                break;
-            }
+    // If 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;
         }
-    }
-    return matchedNode !== null && matchedNode !== void 0 ? matchedNode : fallbackNode;
+    });
+    return matchedNode;
 }
 function matchComponent(node, pathname, forceExact) {
-    var _a;
-    const routePath = (_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.path;
-    const pathnameToMatch = derivePathnameToMatch(pathname, routePath);
     return matchPath({
-        pathname: pathnameToMatch,
-        componentProps: Object.assign(Object.assign({}, node.props), { end: forceExact }),
+        pathname,
+        componentProps: Object.assign(Object.assign({}, node.props), { exact: forceExact }),
     });
 }
 
-/**
- * `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;
-        }
-    }
-    return result;
-};
-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;
+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,
+        };
     }
-    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]);
-        }
-        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);
-    const [routeInfo, setRouteInfo] = useState({
-        id: generateId('routeInfo'),
-        pathname: location.pathname,
-        search: location.search,
-        params: {},
-    });
-    useEffect(() => {
-        if (didMountRef.current) {
+    handleChangeTab(tab, path, routeOptions) {
+        if (!path) {
             return;
         }
-        // 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);
-        registerHistoryListener(handleHistoryChange);
-        didMountRef.current = true;
-    }, []);
-    useEffect(() => {
-        var _a;
-        const activeView = viewStack.current.findViewItemByRouteInfo(routeInfo, undefined, true);
-        const matchedParams = (_a = activeView === null || activeView === void 0 ? void 0 : activeView.routeData.match) === null || _a === void 0 ? void 0 : _a.params;
-        if (matchedParams) {
-            const paramsCopy = filterUndefinedParams(Object.assign({}, matchedParams));
-            if (areParamsEqual(routeInfo.params, paramsCopy)) {
-                return;
+        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 {
+                this.incomingRouteParams.pathname = pathname;
+                this.incomingRouteParams.search = search ? '?' + search : undefined;
+                this.incomingRouteParams.routeOptions = routeOptions;
+                this.props.history.push(pathname + (search ? '?' + search : ''));
             }
-            const updatedRouteInfo = Object.assign(Object.assign({}, 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) => {
-        var _a, _b, _c, _d, _e;
+        else {
+            this.handleNavigate(pathname, 'push', 'none', undefined, routeOptions, tab);
+        }
+    }
+    handleHistoryChange(location, action) {
+        var _a, _b, _c;
         let leavingLocationInfo;
-        /**
-         * A programmatic navigation was triggered.
-         * e.g., `<Redirect />`, `history.push()`, or `handleNavigate()`
-         */
-        if (incomingRouteParams.current) {
-            /**
-             * The current history entry is overwritten, so the previous entry
-             * is the one we are leaving.
-             */
-            if (((_a = incomingRouteParams.current) === null || _a === void 0 ? void 0 : _a.routeAction) === 'replace') {
-                leavingLocationInfo = locationHistory.current.previous();
+        if (this.incomingRouteParams) {
+            if (this.incomingRouteParams.routeAction === 'replace') {
+                leavingLocationInfo = this.locationHistory.previous();
             }
             else {
-                // If the action is 'push' or 'pop', we want to use the current route.
-                leavingLocationInfo = locationHistory.current.current();
+                leavingLocationInfo = this.locationHistory.current();
             }
         }
         else {
-            /**
-             * An external navigation was triggered
-             * e.g., browser back/forward button or direct link
-             *
-             * The leaving location is the current route.
-             */
-            leavingLocationInfo = locationHistory.current.current();
+            leavingLocationInfo = this.locationHistory.current();
         }
         const leavingUrl = leavingLocationInfo.pathname + leavingLocationInfo.search;
         if (leavingUrl !== location.pathname) {
-            if (!incomingRouteParams.current) {
-                // Determine if the destination is a tab route by checking if it matches
-                // the pattern of tab routes (containing /tabs/ in the path)
-                const isTabRoute = /\/tabs(\/|$)/.test(location.pathname);
-                const tabToUse = isTabRoute ? currentTab.current : undefined;
-                // If we're leaving tabs entirely, clear the current tab
-                if (!isTabRoute && currentTab.current) {
-                    currentTab.current = undefined;
-                }
-                /**
-                 * A `REPLACE` action can be triggered by React Router's
-                 * `<Redirect />` component.
-                 */
+            if (!this.incomingRouteParams) {
                 if (action === 'REPLACE') {
-                    incomingRouteParams.current = {
+                    this.incomingRouteParams = {
                         routeAction: 'replace',
                         routeDirection: 'none',
-                        tab: tabToUse,
+                        tab: this.currentTab,
                     };
                 }
-                /**
-                 * A `POP` action can be triggered by the browser's back/forward
-                 * button.
-                 */
                 if (action === 'POP') {
-                    const currentRoute = locationHistory.current.current();
-                    /**
-                     * Check if the current route was "pushed" by a previous route
-                     * (indicates a linear history path).
-                     */
+                    const currentRoute = this.locationHistory.current();
                     if (currentRoute && currentRoute.pushedByRoute) {
-                        const prevInfo = locationHistory.current.findLastLocation(currentRoute);
-                        incomingRouteParams.current = Object.assign(Object.assign({}, prevInfo), { routeAction: 'pop', routeDirection: 'back' });
-                        // It's a non-linear history path like a direct link.
+                        const prevInfo = this.locationHistory.findLastLocation(currentRoute);
+                        this.incomingRouteParams = Object.assign(Object.assign({}, prevInfo), { routeAction: 'pop', routeDirection: 'back' });
                     }
                     else {
-                        incomingRouteParams.current = {
+                        this.incomingRouteParams = {
                             routeAction: 'pop',
                             routeDirection: 'none',
-                            tab: tabToUse,
+                            tab: this.currentTab,
                         };
                     }
                 }
-                if (!incomingRouteParams.current) {
-                    const state = location.state;
-                    incomingRouteParams.current = {
+                if (!this.incomingRouteParams) {
+                    this.incomingRouteParams = {
                         routeAction: 'push',
-                        routeDirection: (state === null || state === void 0 ? void 0 : state.direction) || 'forward',
-                        routeOptions: state === null || state === void 0 ? void 0 : state.routerOptions,
-                        tab: tabToUse,
+                        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,
                     };
                 }
             }
             let routeInfo;
-            // If we're navigating away from tabs to a non-tab route, clear the current tab
-            if (!/\/tabs(\/|$)/.test(location.pathname) && currentTab.current) {
-                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 ((_b = incomingRouteParams.current) === null || _b === void 0 ? void 0 : _b.id) {
-                routeInfo = Object.assign(Object.assign({}, incomingRouteParams.current), { lastPathname: leavingLocationInfo.pathname });
-                locationHistory.current.add(routeInfo);
-                /**
-                 * A new route is being created since it's not re-activating
-                 * an existing route.
-                 */
+            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);
             }
             else {
-                const isPushed = ((_c = incomingRouteParams.current) === null || _c === void 0 ? void 0 : _c.routeAction) === 'push' &&
-                    incomingRouteParams.current.routeDirection === 'forward';
-                routeInfo = Object.assign(Object.assign({ id: generateId('routeInfo') }, incomingRouteParams.current), { lastPathname: leavingLocationInfo.pathname, pathname: location.pathname, search: location.search, params: ((_d = incomingRouteParams.current) === null || _d === void 0 ? void 0 : _d.params)
-                        ? filterUndefinedParams(incomingRouteParams.current.params)
-                        : {}, prevRouteLastPathname: leavingLocationInfo.lastPathname });
+                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 });
                 if (isPushed) {
-                    // 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.tab = leavingLocationInfo.tab;
                     routeInfo.pushedByRoute = leavingLocationInfo.pathname;
-                    // Triggered by a browser back button or handleNavigateBack.
                 }
                 else if (routeInfo.routeAction === 'pop') {
-                    // Find the route that pushed this one.
-                    const r = locationHistory.current.findLastLocation(routeInfo);
+                    const r = this.locationHistory.findLastLocation(routeInfo);
                     routeInfo.pushedByRoute = r === null || r === void 0 ? void 0 : 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 = locationHistory.current.getCurrentRouteInfoForTab(routeInfo.tab);
-                    // This helps maintain correct back stack behavior within tabs.
-                    // If this is the first time entering this tab from a different context,
-                    // use the leaving route's pathname as the pushedByRoute to maintain the back stack.
-                    routeInfo.pushedByRoute = (_e = lastRoute === null || lastRoute === void 0 ? void 0 : lastRoute.pushedByRoute) !== null && _e !== void 0 ? _e : leavingLocationInfo.pathname;
-                    // Triggered by `history.replace()` or a `<Redirect />` component, etc.
+                    // 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;
                 }
                 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();
                     /**
-                     * 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.
+                     * 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 pushedByRoute = currentPushedBy !== undefined && currentPushedBy !== routeInfo.pathname
@@ -2143,107 +739,46 @@ const IonRouter = ({ children, registerHistoryListener }) => {
                     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);
                 }
-                locationHistory.current.add(routeInfo);
+                this.locationHistory.add(routeInfo);
             }
-            setRouteInfo(routeInfo);
-        }
-        incomingRouteParams.current = null;
-    };
-    /**
-     * 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.
-     */
-    const handleResetTab = (tab, originalHref, originalRouteOptions) => {
-        const routeInfo = locationHistory.current.getFirstRouteInfoForTab(tab);
-        if (routeInfo) {
-            const newRouteInfo = Object.assign({}, routeInfo);
-            newRouteInfo.pathname = originalHref;
-            newRouteInfo.routeOptions = originalRouteOptions;
-            incomingRouteParams.current = Object.assign(Object.assign({}, newRouteInfo), { routeAction: 'pop', routeDirection: 'back' });
-            navigate(newRouteInfo.pathname + (newRouteInfo.search || ''));
+            this.setState({
+                routeInfo,
+            });
         }
-    };
+        this.incomingRouteParams = undefined;
+    }
     /**
-     * Handles tab changes.
-     *
-     * @param tab The tab to switch to.
-     * @param path The new path for the tab.
-     * @param routeOptions Additional route options.
+     * 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 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 = Object.assign(Object.assign({}, routeInfo), { routeAction: 'push', routeDirection: 'none' });
-            /**
-             * User is navigating to the same tab.
-             * e.g., `/tabs/home` → `/tabs/home`
-             */
-            if (routeInfo.pathname === pathname) {
-                incomingRouteParams.current = Object.assign(Object.assign({}, routeParams), { routeOptions });
-                navigate(routeInfo.pathname + (routeInfo.search || ''));
-                /**
-                 * User is navigating to a different tab.
-                 * e.g., `/tabs/home` → `/tabs/settings`
-                 */
-            }
-            else {
-                incomingRouteParams.current = Object.assign(Object.assign({}, routeParams), { pathname, search: search ? '?' + search : undefined, routeOptions });
-                navigate(pathname + (search ? '?' + search : ''));
-            }
-            // User has not navigated to this tab before.
+    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);
         }
         else {
-            handleNavigate(pathname, 'push', 'none', undefined, routeOptions, tab);
-        }
-    };
-    /**
-     * 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.
-     */
-    const handleSetCurrentTab = (tab) => {
-        currentTab.current = tab;
-        const ri = Object.assign({}, locationHistory.current.current());
-        if (ri.tab !== tab) {
-            ri.tab = tab;
-            locationHistory.current.update(ri);
+            this.props.history.replace(path);
         }
-    };
-    /**
-     * 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) => {
+    }
+    handleNavigateBack(defaultHref = '/', routeAnimation) {
         const config = getConfig();
         defaultHref = defaultHref ? defaultHref : config && config.get('backButtonDefaultHref');
-        const routeInfo = locationHistory.current.current();
-        // It's a linear navigation.
+        const routeInfo = this.locationHistory.current();
         if (routeInfo && routeInfo.pushedByRoute) {
-            const prevInfo = locationHistory.current.findLastLocation(routeInfo);
+            const prevInfo = this.locationHistory.findLastLocation(routeInfo);
             if (prevInfo) {
                 /**
                  * This needs to be passed to handleNavigate
@@ -2251,232 +786,160 @@ const IonRouter = ({ children, registerHistoryListener }) => {
                  * will be overridden.
                  */
                 const incomingAnimation = routeAnimation || routeInfo.routeAnimation;
-                incomingRouteParams.current = Object.assign(Object.assign({}, 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) {
-                    navigate(-1);
-                }
-                else {
+                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 === '')) {
                     /**
-                     * It's a non-linear back navigation.
-                     * e.g., direct link or tab switch or nested navigation with redirects
+                     * 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.
                      */
-                    handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', incomingAnimation);
+                    const history = this.props.history;
+                    const goBack = history.goBack || history.back;
+                    goBack();
+                }
+                else {
+                    this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', incomingAnimation);
                 }
-                /**
-                 * `pushedByRoute` exists, but no corresponding previous entry in
-                 * the history stack.
-                 */
             }
             else {
-                handleNavigate(defaultHref, 'pop', 'back', routeAnimation);
+                this.handleNavigate(defaultHref, 'pop', 'back', routeAnimation);
             }
-            /**
-             * No `pushedByRoute`
-             * e.g., initial page load
-             */
         }
         else {
-            handleNavigate(defaultHref, 'pop', 'back', routeAnimation);
+            this.handleNavigate(defaultHref, 'pop', 'back', routeAnimation);
         }
-    };
-    /**
-     * 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) => {
-        var _a;
-        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
-        if (!tab && currentTab.current && path) {
-            // Get the current route info to understand where we are
-            const currentRoute = locationHistory.current.current();
-            // If we're navigating from a tab route to a completely different path structure,
-            // we should clear the tab context. This is a simplified check that assumes
-            // tab routes share a common parent path.
-            if (currentRoute && currentRoute.pathname) {
-                // Extract the base tab path (e.g., /routing/tabs from /routing/tabs/home)
-                const tabBaseMatch = currentRoute.pathname.match(/^(.*\/tabs)/);
-                if (tabBaseMatch) {
-                    const tabBasePath = tabBaseMatch[1];
-                    // If the new path doesn't start with the tab base path, we're leaving tabs
-                    if (!path.startsWith(tabBasePath)) {
-                        currentTab.current = undefined;
-                        navigationTab = undefined;
-                    }
-                    else {
-                        // Still within tabs, preserve the tab context
-                        navigationTab = currentTab.current;
-                    }
-                }
-            }
+    }
+    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 || ''));
         }
-        const baseParams = (_a = incomingRouteParams.current) !== null && _a !== void 0 ? _a : {};
-        incomingRouteParams.current = Object.assign(Object.assign({}, baseParams), { routeAction, routeDirection: normalizedRouteDirection, routeOptions,
-            routeAnimation, tab: navigationTab });
-        navigate(path, { replace: routeAction !== 'push' });
-    };
-    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, ionRedirect: {}, stackManager: StackManager, routeInfo: routeInfo, onNativeBack: handleNativeBack, onNavigateBack: handleNavigateBack, onNavigate: handleNavigate, onSetCurrentTab: handleSetCurrentTab, onChangeTab: handleChangeTab, onResetTab: handleResetTab, locationHistory: locationHistory.current }, children)));
-};
+    }
+    handleSetCurrentTab(tab) {
+        this.currentTab = tab;
+        const ri = Object.assign({}, this.locationHistory.current());
+        if (ri.tab !== tab) {
+            ri.tab = tab;
+            this.locationHistory.update(ri);
+        }
+    }
+    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);
 IonRouter.displayName = 'IonRouter';
 
-/**
- * `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;
-    }, []);
+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);
+    }
     /**
-     * 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').
+     * 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.
      */
-    const handleHistoryChange = useCallback((loc, act) => {
-        if (historyListenHandler.current) {
-            historyListenHandler.current(loc, act);
+    handleHistoryChange(location, action) {
+        const locationValue = location.location || location;
+        const actionValue = location.action || action;
+        if (this.historyListenHandler) {
+            this.historyListenHandler(locationValue, actionValue);
         }
-    }, []);
-    useEffect(() => {
-        handleHistoryChange(location, navigationType);
-    }, [location, navigationType, handleHistoryChange]);
-    return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
-};
-const IonReactRouter = (_a) => {
-    var { children } = _a, browserRouterProps = __rest(_a, ["children"]);
-    return (React.createElement(BrowserRouter, Object.assign({}, browserRouterProps),
-        React.createElement(RouterContent$2, null, children)));
-};
+    }
+    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)));
+    }
+}
 
-/**
- * `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 = (cb) => {
-        historyListenHandler.current = cb;
-    };
+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);
+    }
     /**
-     * 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').
+     * 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.
      */
-    const handleHistoryChange = (location, action) => {
-        if (historyListenHandler.current) {
-            historyListenHandler.current(location, action);
+    handleHistoryChange(location, action) {
+        const locationValue = location.location || location;
+        const actionValue = location.action || action;
+        if (this.historyListenHandler) {
+            this.historyListenHandler(locationValue, actionValue);
         }
-    };
-    useEffect(() => {
-        handleHistoryChange(location, navigationType);
-    }, [location, navigationType]);
-    return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
-};
-const IonReactMemoryRouter = (_a) => {
-    var { children } = _a, routerProps = __rest(_a, ["children"]);
-    return (React.createElement(MemoryRouter, Object.assign({}, routerProps),
-        React.createElement(RouterContent$1, null, children)));
-};
+    }
+    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)));
+    }
+}
 
-/**
- * `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 = (cb) => {
-        historyListenHandler.current = cb;
-    };
+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);
+    }
     /**
-     * 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').
+     * 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.
      */
-    const handleHistoryChange = (location, action) => {
-        if (historyListenHandler.current) {
-            historyListenHandler.current(location, action);
+    handleHistoryChange(location, action) {
+        const locationValue = location.location || location;
+        const actionValue = location.action || action;
+        if (this.historyListenHandler) {
+            this.historyListenHandler(locationValue, actionValue);
         }
-    };
-    useEffect(() => {
-        handleHistoryChange(location, navigationType);
-    }, [location, navigationType]);
-    return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
-};
-const IonReactHashRouter = (_a) => {
-    var { children } = _a, routerProps = __rest(_a, ["children"]);
-    return (React.createElement(HashRouter, Object.assign({}, routerProps),
-        React.createElement(RouterContent, null, children)));
-};
+    }
+    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)));
+    }
+}
 
 export { IonReactHashRouter, IonReactMemoryRouter, IonReactRouter };
 //# sourceMappingURL=index.js.map