@ionic/react-router 8.7.13-dev.11765426479.16a61ecf → 8.7.13-dev.11765477700.112ae0a3

package/dist/index.js

@@ -13,13 +13,10 @@ 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
+    // Handle index routes - they match when pathname is empty or just "/"
     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: {},
@@ -32,14 +29,25 @@ const matchPath = ({ pathname, componentProps }) => {
                 },
             };
         }
-        // Otherwise, index routes don't match when there's additional path
         return null;
     }
-    if (!path) {
+    // 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,
+                },
+            };
+        }
         return null;
     }
-    // For relative paths in nested routes (those that don't start with '/'),
-    // use React Router's matcher against a normalized path.
+    // For relative paths (don't start with '/'), normalize both path and pathname for matching
     if (!path.startsWith('/')) {
         const matchOptions = Object.assign({ path: `/${path}` }, restProps);
         if ((matchOptions === null || matchOptions === void 0 ? void 0 : matchOptions.end) === undefined) {
@@ -51,7 +59,6 @@ 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.
@@ -71,12 +78,16 @@ 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) {
-        return '';
+        // For root-level relative routes (pathname is "/" and routePath is relative),
+        // return the full pathname so matchPath can normalize both.
+        // This allows routes like <Route path="foo/*" .../> at root level to work correctly.
+        return fullPathname;
     }
     const fullSegments = trimmedPath.split('/').filter(Boolean);
     if (fullSegments.length === 0) {
@@ -152,24 +163,36 @@ const computeCommonPrefix = (paths) => {
     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.
+ * Checks if a route path is a "splat-only" route (just `*` or `/*`).
+ */
+const isSplatOnlyRoute = (routePath) => {
+    return routePath === '*' || routePath === '/*';
+};
+/**
+ * Checks if a route has an embedded wildcard (e.g., "tab1/*" but not "*" or "/*").
+ */
+const hasEmbeddedWildcard = (routePath) => {
+    return !!routePath && routePath.includes('*') && !isSplatOnlyRoute(routePath);
+};
+/**
+ * Checks if a route with an embedded wildcard matches a pathname.
+ */
+const matchesEmbeddedWildcardRoute = (route, pathname) => {
+    const routePath = route.props.path;
+    if (!hasEmbeddedWildcard(routePath)) {
+        return false;
+    }
+    return !!matchPath({ pathname, componentProps: route.props });
+};
+/**
+ * Checks if a route is a specific match (not wildcard-only or index).
  */
 const isSpecificRouteMatch = (route, remainingPath) => {
     const routePath = route.props.path;
-    const isWildcardOnly = routePath === '*' || routePath === '/*';
-    const isIndex = route.props.index;
-    // Skip wildcards and index routes
-    if (isIndex || isWildcardOnly) {
+    if (route.props.index || isSplatOnlyRoute(routePath)) {
         return false;
     }
-    return !!matchPath({
-        pathname: remainingPath,
-        componentProps: route.props,
-    });
+    return !!matchPath({ pathname: remainingPath, componentProps: route.props });
 };
 /**
  * Analyzes route children to determine their characteristics.
@@ -214,11 +237,13 @@ const computeParentPath = (options) => {
             let firstSpecificMatch = undefined;
             let firstWildcardMatch = undefined;
             let indexMatchAtMount = undefined;
+            // Start at i = 1 (normal case: strip at least one segment for parent path)
             for (let i = 1; i <= segments.length; i++) {
                 const parentPath = '/' + segments.slice(0, i).join('/');
                 const remainingPath = segments.slice(i).join('/');
-                // Check for specific (non-wildcard, non-index) route matches
-                const hasSpecificMatch = routeChildren.some((route) => isSpecificRouteMatch(route, remainingPath));
+                // Check for specific route matches (non-wildcard-only, non-index)
+                // Also check routes with embedded wildcards (e.g., "tab1/*")
+                const hasSpecificMatch = routeChildren.some((route) => isSpecificRouteMatch(route, remainingPath) || matchesEmbeddedWildcardRoute(route, remainingPath));
                 if (hasSpecificMatch && !firstSpecificMatch) {
                     firstSpecificMatch = parentPath;
                     // Found a specific match - this is our answer for non-index routes
@@ -265,6 +290,16 @@ const computeParentPath = (options) => {
                     }
                 }
             }
+            // Fallback: check at root level (i = 0) for embedded wildcard routes.
+            // This handles outlets inside root-level splat routes where routes like
+            // "tab1/*" need to match the full pathname.
+            if (!firstSpecificMatch) {
+                const fullRemainingPath = segments.join('/');
+                const hasRootLevelMatch = routeChildren.some((route) => matchesEmbeddedWildcardRoute(route, fullRemainingPath));
+                if (hasRootLevelMatch) {
+                    firstSpecificMatch = '/';
+                }
+            }
             // Determine the best parent path:
             // 1. Specific match (routes like tabs/*, favorites) - highest priority
             // 2. Wildcard match (route path="*") - catches unmatched segments
@@ -740,27 +775,36 @@ class ReactRouterViewStack extends ViewStacks {
                 const combinedParams = Object.assign(Object.assign({}, accumulatedParentParams), ((_c = routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.params) !== null && _c !== void 0 ? _c : {}));
                 // For relative route paths, we need to compute an absolute pathnameBase
                 // by combining the parent's pathnameBase with the matched portion
-                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 isSplatOnlyRoute = routePath === '*' || routePath === '/*';
+                // Get parent's pathnameBase for relative path resolution
+                const parentPathnameBase = parentMatches.length > 0 ? parentMatches[parentMatches.length - 1].pathnameBase : '/';
+                // Start with the match's pathnameBase, falling back to routeInfo.pathname
+                // BUT: splat-only routes should use parent's base (v7_relativeSplatPath behavior)
+                let absolutePathnameBase;
+                if (isSplatOnlyRoute) {
+                    // Splat routes should NOT contribute their matched portion to pathnameBase
+                    // This aligns with React Router v7's v7_relativeSplatPath behavior
+                    // Without this, relative links inside splat routes get double path segments
+                    absolutePathnameBase = parentPathnameBase;
+                }
+                else if (isRelativePath && (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathnameBase)) {
+                    // For relative paths with a pathnameBase, combine with parent
+                    const relativeBase = routeMatch.pathnameBase.startsWith('/')
+                        ? routeMatch.pathnameBase.slice(1)
+                        : routeMatch.pathnameBase;
+                    absolutePathnameBase =
+                        parentPathnameBase === '/' ? `/${relativeBase}` : `${parentPathnameBase}/${relativeBase}`;
+                }
+                else if (isIndexRoute) {
+                    // Index routes should use the parent's base as their base
+                    absolutePathnameBase = parentPathnameBase;
+                }
+                else {
+                    // Default: use the match's pathnameBase or the current pathname
+                    absolutePathnameBase = (routeMatch === null || routeMatch === void 0 ? void 0 : routeMatch.pathnameBase) || routeInfo.pathname;
                 }
                 const contextMatches = [
                     ...parentMatches,
@@ -804,7 +848,9 @@ class ReactRouterViewStack extends ViewStacks {
             let parentPath = undefined;
             try {
                 // Only attempt parent path computation for non-root outlets
-                if (outletId !== 'routerOutlet') {
+                // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
+                const isRootOutlet = outletId.startsWith('routerOutlet');
+                if (!isRootOutlet) {
                     const routeChildren = extractRouteChildren(ionRouterOutlet.props.children);
                     const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
                     if (hasRelativeRoutes || hasIndexRoute) {
@@ -1046,7 +1092,7 @@ class ReactRouterViewStack extends ViewStacks {
          * Matches a view with no path prop (default fallback route) or index route.
          */
         function matchDefaultRoute(v) {
-            var _a;
+            var _a, _b, _c;
             const childProps = v.routeData.childProps;
             const isDefaultRoute = childProps.path === undefined || childProps.path === '';
             const isIndexRoute = !!childProps.index;
@@ -1059,14 +1105,22 @@ 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: (_a = childProps.caseSensitive) !== null && _a !== void 0 ? _a : false,
+                        caseSensitive: (_c = childProps.caseSensitive) !== null && _c !== void 0 ? _c : false,
                         end: true,
                     },
                 };
@@ -1191,24 +1245,30 @@ class StackManager extends React.PureComponent {
         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) {
+        // Check if this outlet has route children to analyze
+        if (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;
+            // 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;
             }
-            return result.parentPath;
         }
         return this.outletMountPath;
     }
@@ -1297,7 +1357,9 @@ class StackManager extends React.PureComponent {
      */
     handleOutOfContextNestedOutlet(parentPath, leavingViewItem) {
         var _a;
-        if (this.id === 'routerOutlet' || parentPath !== undefined || !this.ionRouterOutlet) {
+        // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
+        const isRootOutlet = this.id.startsWith('routerOutlet');
+        if (isRootOutlet || parentPath !== undefined || !this.ionRouterOutlet) {
             return false;
         }
         const routesChildren = (_a = getRoutesChildren(this.ionRouterOutlet.props.children)) !== null && _a !== void 0 ? _a : this.ionRouterOutlet.props.children;
@@ -1322,7 +1384,9 @@ class StackManager extends React.PureComponent {
      * Returns true if the transition should be aborted.
      */
     handleNoMatchingRoute(enteringRoute, enteringViewItem, leavingViewItem) {
-        if (this.id === 'routerOutlet' || enteringRoute || enteringViewItem) {
+        // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
+        const isRootOutlet = this.id.startsWith('routerOutlet');
+        if (isRootOutlet || enteringRoute || enteringViewItem) {
             return false;
         }
         // Hide any visible views in this outlet since it has no matching route
@@ -1869,27 +1933,59 @@ 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
-    let pathnameToMatch = routeInfo.pathname;
+    const originalPathname = routeInfo.pathname;
+    let relativePathnameToMatch = routeInfo.pathname;
     // Check if we have relative routes (routes that don't start with '/')
     const hasRelativeRoutes = sortedRoutes.some((r) => r.props.path && !r.props.path.startsWith('/'));
     const hasIndexRoute = sortedRoutes.some((r) => r.props.index);
     // SIMPLIFIED: Trust React Router 6's matching more, compute relative path when parent is known
     if ((hasRelativeRoutes || hasIndexRoute) && parentPath) {
         const parentPrefix = parentPath.replace('/*', '');
-        const normalizedParent = stripTrailingSlash(parentPrefix);
+        // Normalize both paths to start with '/' for consistent comparison
+        const normalizedParent = stripTrailingSlash(parentPrefix.startsWith('/') ? parentPrefix : `/${parentPrefix}`);
         const normalizedPathname = stripTrailingSlash(routeInfo.pathname);
         // Only compute relative path if pathname is within parent scope
         if (normalizedPathname.startsWith(normalizedParent + '/') || normalizedPathname === normalizedParent) {
             const pathSegments = routeInfo.pathname.split('/').filter(Boolean);
             const parentSegments = normalizedParent.split('/').filter(Boolean);
             const relativeSegments = pathSegments.slice(parentSegments.length);
-            pathnameToMatch = relativeSegments.join('/'); // Empty string is valid for index routes
+            relativePathnameToMatch = relativeSegments.join('/'); // Empty string is valid for index routes
         }
     }
     // Find the first matching route
     for (const child of sortedRoutes) {
+        const childPath = child.props.path;
+        const isAbsoluteRoute = childPath && childPath.startsWith('/');
+        // Determine which pathname to match against:
+        // - For absolute routes: use the original full pathname
+        // - For relative routes with a parent: use the computed relative pathname
+        // - For relative routes at root level (no parent): use the original pathname
+        //   (matchPath will handle the relative-to-absolute normalization)
+        const pathnameToMatch = isAbsoluteRoute ? originalPathname : relativePathnameToMatch;
+        // Determine the path portion to match:
+        // - For absolute routes: use derivePathnameToMatch
+        // - For relative routes at root level (no parent): use original pathname
+        //   directly since matchPath normalizes both path and pathname
+        // - For relative routes with parent: use derivePathnameToMatch for wildcards,
+        //   or the computed relative pathname for non-wildcards
+        let pathForMatch;
+        if (isAbsoluteRoute) {
+            pathForMatch = derivePathnameToMatch(pathnameToMatch, childPath);
+        }
+        else if (!parentPath && childPath) {
+            // Root-level relative route: use the full pathname and let matchPath
+            // handle the normalization (it adds '/' to both path and pathname)
+            pathForMatch = originalPathname;
+        }
+        else if (childPath && childPath.includes('*')) {
+            // Relative wildcard route with parent path: use derivePathnameToMatch
+            pathForMatch = derivePathnameToMatch(pathnameToMatch, childPath);
+        }
+        else {
+            pathForMatch = pathnameToMatch;
+        }
         const match = matchPath({
-            pathname: pathnameToMatch,
+            pathname: pathForMatch,
             componentProps: child.props,
         });
         if (match) {