@ionic/react-router 8.7.12-dev.11765307927.1f491e92 → 8.7.12-dev.11765377112.16762e5b

package/dist/index.js

@@ -13,10 +13,13 @@ const IonRouteInner = ({ path, element }) => {
  * @see https://reactrouter.com/v6/utils/match-path
  */
 const matchPath = ({ pathname, componentProps }) => {
-    var _a, _b;
     const { path, index } = componentProps, restProps = __rest(componentProps, ["path", "index"]);
-    // Handle index routes - they match when pathname is empty or just "/"
+    // Handle index routes
     if (index && !path) {
+        // Index routes match when there's no additional path after the parent route
+        // For example, in a nested outlet at /routing/*, the index route matches
+        // when the relative path is empty (i.e., we're exactly at /routing)
+        // If pathname is empty or just "/", it should match the index route
         if (pathname === '' || pathname === '/') {
             return {
                 params: {},
@@ -29,25 +32,14 @@ const matchPath = ({ pathname, componentProps }) => {
                 },
             };
         }
+        // Otherwise, index routes don't match when there's additional path
         return null;
     }
-    // Handle empty path routes - they match when pathname is also empty or just "/"
-    if (path === '' || path === undefined) {
-        if (pathname === '' || pathname === '/') {
-            return {
-                params: {},
-                pathname: pathname,
-                pathnameBase: pathname || '/',
-                pattern: {
-                    path: '',
-                    caseSensitive: (_a = restProps.caseSensitive) !== null && _a !== void 0 ? _a : false,
-                    end: (_b = restProps.end) !== null && _b !== void 0 ? _b : true,
-                },
-            };
-        }
+    if (!path) {
         return null;
     }
-    // For relative paths (don't start with '/'), normalize both path and pathname for matching
+    // For relative paths in nested routes (those that don't start with '/'),
+    // use React Router's matcher against a normalized path.
     if (!path.startsWith('/')) {
         const matchOptions = Object.assign({ path: `/${path}` }, restProps);
         if ((matchOptions === null || matchOptions === void 0 ? void 0 : matchOptions.end) === undefined) {
@@ -59,6 +51,7 @@ const matchPath = ({ pathname, componentProps }) => {
             // Adjust the match to remove the leading '/' we added
             return Object.assign(Object.assign({}, match), { pathname: pathname, pathnameBase: match.pathnameBase === '/' ? '' : match.pathnameBase.slice(1), pattern: Object.assign(Object.assign({}, match.pattern), { path: path }) });
         }
+        // No match found
         return null;
     }
     // For absolute paths, use React Router's matcher directly.
@@ -78,16 +71,12 @@ const matchPath = ({ pathname, componentProps }) => {
  */
 const derivePathnameToMatch = (fullPathname, routePath) => {
     var _a;
-    // For absolute or empty routes, use the full pathname as-is
     if (!routePath || routePath === '' || routePath.startsWith('/')) {
         return fullPathname;
     }
     const trimmedPath = fullPathname.startsWith('/') ? fullPathname.slice(1) : fullPathname;
     if (!trimmedPath) {
-        // For root-level relative routes (pathname is "/" and routePath is relative),
-        // return the full pathname so matchPath can normalize both.
-        // This allows routes like <Route path="foo/*" .../> at root level to work correctly.
-        return fullPathname;
+        return '';
     }
     const fullSegments = trimmedPath.split('/').filter(Boolean);
     if (fullSegments.length === 0) {
@@ -815,9 +804,7 @@ class ReactRouterViewStack extends ViewStacks {
             let parentPath = undefined;
             try {
                 // Only attempt parent path computation for non-root outlets
-                // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
-                const isRootOutlet = outletId.startsWith('routerOutlet');
-                if (!isRootOutlet) {
+                if (outletId !== 'routerOutlet') {
                     const routeChildren = extractRouteChildren(ionRouterOutlet.props.children);
                     const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
                     if (hasRelativeRoutes || hasIndexRoute) {
@@ -1059,7 +1046,7 @@ class ReactRouterViewStack extends ViewStacks {
          * Matches a view with no path prop (default fallback route) or index route.
          */
         function matchDefaultRoute(v) {
-            var _a, _b, _c;
+            var _a;
             const childProps = v.routeData.childProps;
             const isDefaultRoute = childProps.path === undefined || childProps.path === '';
             const isIndexRoute = !!childProps.index;
@@ -1072,22 +1059,14 @@ class ReactRouterViewStack extends ViewStacks {
                 }
                 return false;
             }
-            // For empty path routes, only match if we're at the same level as when the view was created.
-            // This prevents an empty path view item from being reused for different routes.
             if (isDefaultRoute) {
-                const previousPathnameBase = ((_b = (_a = v.routeData) === null || _a === void 0 ? void 0 : _a.match) === null || _b === void 0 ? void 0 : _b.pathnameBase) || '';
-                const normalizedBase = normalizePathnameForComparison(previousPathnameBase);
-                const normalizedPathname = normalizePathnameForComparison(pathname);
-                if (normalizedPathname !== normalizedBase) {
-                    return false;
-                }
                 match = {
                     params: {},
                     pathname,
                     pathnameBase: pathname === '' ? '/' : pathname,
                     pattern: {
                         path: '',
-                        caseSensitive: (_c = childProps.caseSensitive) !== null && _c !== void 0 ? _c : false,
+                        caseSensitive: (_a = childProps.caseSensitive) !== null && _a !== void 0 ? _a : false,
                         end: true,
                     },
                 };
@@ -1212,30 +1191,24 @@ class StackManager extends React.PureComponent {
         if (this.outletMountPath && !currentPathname.startsWith(this.outletMountPath)) {
             return undefined;
         }
-        // Check if this outlet has route children to analyze
-        if (this.ionRouterOutlet) {
+        // If this is a nested outlet (has an explicit ID like "main"),
+        // we need to figure out what part of the path was already matched
+        if (this.id !== 'routerOutlet' && this.ionRouterOutlet) {
             const routeChildren = extractRouteChildren(this.ionRouterOutlet.props.children);
             const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
-            // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
-            // But even outlets with auto-generated IDs may need parent path computation
-            // if they have relative routes (indicating they're nested outlets)
-            const isRootOutlet = this.id.startsWith('routerOutlet');
-            const needsParentPath = !isRootOutlet || hasRelativeRoutes || hasIndexRoute;
-            if (needsParentPath) {
-                const result = computeParentPath({
-                    currentPathname,
-                    outletMountPath: this.outletMountPath,
-                    routeChildren,
-                    hasRelativeRoutes,
-                    hasIndexRoute,
-                    hasWildcardRoute,
-                });
-                // Update the outlet mount path if it was set
-                if (result.outletMountPath && !this.outletMountPath) {
-                    this.outletMountPath = result.outletMountPath;
-                }
-                return result.parentPath;
+            const result = computeParentPath({
+                currentPathname,
+                outletMountPath: this.outletMountPath,
+                routeChildren,
+                hasRelativeRoutes,
+                hasIndexRoute,
+                hasWildcardRoute,
+            });
+            // Update the outlet mount path if it was set
+            if (result.outletMountPath && !this.outletMountPath) {
+                this.outletMountPath = result.outletMountPath;
             }
+            return result.parentPath;
         }
         return this.outletMountPath;
     }
@@ -1324,9 +1297,7 @@ class StackManager extends React.PureComponent {
      */
     handleOutOfContextNestedOutlet(parentPath, leavingViewItem) {
         var _a;
-        // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
-        const isRootOutlet = this.id.startsWith('routerOutlet');
-        if (isRootOutlet || parentPath !== undefined || !this.ionRouterOutlet) {
+        if (this.id === 'routerOutlet' || parentPath !== undefined || !this.ionRouterOutlet) {
             return false;
         }
         const routesChildren = (_a = getRoutesChildren(this.ionRouterOutlet.props.children)) !== null && _a !== void 0 ? _a : this.ionRouterOutlet.props.children;
@@ -1351,9 +1322,7 @@ class StackManager extends React.PureComponent {
      * Returns true if the transition should be aborted.
      */
     handleNoMatchingRoute(enteringRoute, enteringViewItem, leavingViewItem) {
-        // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
-        const isRootOutlet = this.id.startsWith('routerOutlet');
-        if (isRootOutlet || enteringRoute || enteringViewItem) {
+        if (this.id === 'routerOutlet' || enteringRoute || enteringViewItem) {
             return false;
         }
         // Hide any visible views in this outlet since it has no matching route
@@ -1900,59 +1869,27 @@ function findRouteByRouteInfo(node, routeInfo, parentPath) {
     });
     // For nested routes in React Router 6, we need to extract the relative path
     // that this outlet should be responsible for matching
-    const originalPathname = routeInfo.pathname;
-    let relativePathnameToMatch = routeInfo.pathname;
+    let pathnameToMatch = routeInfo.pathname;
     // Check if we have relative routes (routes that don't start with '/')
     const hasRelativeRoutes = sortedRoutes.some((r) => r.props.path && !r.props.path.startsWith('/'));
     const hasIndexRoute = sortedRoutes.some((r) => r.props.index);
     // SIMPLIFIED: Trust React Router 6's matching more, compute relative path when parent is known
     if ((hasRelativeRoutes || hasIndexRoute) && parentPath) {
         const parentPrefix = parentPath.replace('/*', '');
-        // Normalize both paths to start with '/' for consistent comparison
-        const normalizedParent = stripTrailingSlash(parentPrefix.startsWith('/') ? parentPrefix : `/${parentPrefix}`);
+        const normalizedParent = stripTrailingSlash(parentPrefix);
         const normalizedPathname = stripTrailingSlash(routeInfo.pathname);
         // Only compute relative path if pathname is within parent scope
         if (normalizedPathname.startsWith(normalizedParent + '/') || normalizedPathname === normalizedParent) {
             const pathSegments = routeInfo.pathname.split('/').filter(Boolean);
             const parentSegments = normalizedParent.split('/').filter(Boolean);
             const relativeSegments = pathSegments.slice(parentSegments.length);
-            relativePathnameToMatch = relativeSegments.join('/'); // Empty string is valid for index routes
+            pathnameToMatch = relativeSegments.join('/'); // Empty string is valid for index routes
         }
     }
     // Find the first matching route
     for (const child of sortedRoutes) {
-        const childPath = child.props.path;
-        const isAbsoluteRoute = childPath && childPath.startsWith('/');
-        // Determine which pathname to match against:
-        // - For absolute routes: use the original full pathname
-        // - For relative routes with a parent: use the computed relative pathname
-        // - For relative routes at root level (no parent): use the original pathname
-        //   (matchPath will handle the relative-to-absolute normalization)
-        const pathnameToMatch = isAbsoluteRoute ? originalPathname : relativePathnameToMatch;
-        // Determine the path portion to match:
-        // - For absolute routes: use derivePathnameToMatch
-        // - For relative routes at root level (no parent): use original pathname
-        //   directly since matchPath normalizes both path and pathname
-        // - For relative routes with parent: use derivePathnameToMatch for wildcards,
-        //   or the computed relative pathname for non-wildcards
-        let pathForMatch;
-        if (isAbsoluteRoute) {
-            pathForMatch = derivePathnameToMatch(pathnameToMatch, childPath);
-        }
-        else if (!parentPath && childPath) {
-            // Root-level relative route: use the full pathname and let matchPath
-            // handle the normalization (it adds '/' to both path and pathname)
-            pathForMatch = originalPathname;
-        }
-        else if (childPath && childPath.includes('*')) {
-            // Relative wildcard route with parent path: use derivePathnameToMatch
-            pathForMatch = derivePathnameToMatch(pathnameToMatch, childPath);
-        }
-        else {
-            pathForMatch = pathnameToMatch;
-        }
         const match = matchPath({
-            pathname: pathForMatch,
+            pathname: pathnameToMatch,
             componentProps: child.props,
         });
         if (match) {
@@ -2210,10 +2147,16 @@ const IonRouter = ({ children, registerHistoryListener }) => {
                      * 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;
+                    /**
+                     * Tab bar switches (direction 'none') should not create cross-tab back
+                     * navigation. Only inherit pushedByRoute from the tab's own history.
+                     */
+                    if (routeInfo.routeDirection === 'none') {
+                        routeInfo.pushedByRoute = lastRoute === null || lastRoute === void 0 ? void 0 : lastRoute.pushedByRoute;
+                    }
+                    else {
+                        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.
                 }
                 else if (routeInfo.routeAction === 'replace') {
@@ -2380,11 +2323,14 @@ const IonRouter = ({ children, registerHistoryListener }) => {
                 handleNavigate(defaultHref, 'pop', 'back', routeAnimation);
             }
             /**
-             * No `pushedByRoute`
-             * e.g., initial page load
+             * No `pushedByRoute` (e.g., initial page load or tab root).
+             * Tabs with no back history should not navigate.
              */
         }
         else {
+            if (routeInfo && routeInfo.tab) {
+                return;
+            }
             handleNavigate(defaultHref, 'pop', 'back', routeAnimation);
         }
     };