@ionic/react-router 9.0.7-dev.11790887756.13f9320e → 9.0.7-dev.11791381676.118a7a15

package/dist/index.js

@@ -8,6 +8,34 @@ const IonRouteInner = ({ path, index, caseSensitive, element }) => {
     return React.createElement(Route, { path: path, index: index, caseSensitive: caseSensitive, element: element });
 };
 
+/**
+ * Compares two route param objects by value, treating a missing object as empty.
+ *
+ * @param a The first params object.
+ * @param b The second params object.
+ * @returns True if both have the same keys with equal values.
+ */
+const areParamsEqual = (a, b) => {
+    const paramsA = a || {};
+    const paramsB = b || {};
+    const keysA = Object.keys(paramsA);
+    const keysB = Object.keys(paramsB);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    return keysA.every((key) => {
+        const valueA = paramsA[key];
+        const valueB = paramsB[key];
+        if (Array.isArray(valueA) && Array.isArray(valueB)) {
+            if (valueA.length !== valueB.length) {
+                return false;
+            }
+            return valueA.every((entry, idx) => entry === valueB[idx]);
+        }
+        return valueA === valueB;
+    });
+};
+
 /**
  * The matchPath function is used only for matching paths, not rendering components or elements.
  * @see https://reactrouter.com/v6/utils/match-path
@@ -694,6 +722,42 @@ const resolveIndexRouteMatch = (viewItem, pathname, parentPath) => {
     const normalizedBase = normalizePathnameForComparison(previousMatch.pathnameBase || previousMatch.pathname || '');
     return normalizedPathname === normalizedBase ? previousMatch : null;
 };
+const shallowEqual = (a, b) => {
+    const aRecord = a;
+    const bRecord = b;
+    const aKeys = Object.keys(aRecord);
+    return aKeys.length === Object.keys(bRecord).length && aKeys.every((key) => aRecord[key] === bRecord[key]);
+};
+const isSameMatch = (a, b) => a === b ||
+    (a.pathname === b.pathname &&
+        a.pathnameBase === b.pathnameBase &&
+        areParamsEqual(a.params, b.params) &&
+        (a.route === b.route || shallowEqual(a.route, b.route)));
+/**
+ * The outlet rebuilds a view's RouteContext on every render, and it renders
+ * several times per navigation, so this compares by content to tell whether
+ * the view's route state actually changed.
+ */
+const isSameRouteContext = (a, b) => {
+    const { matches: aMatches, ...aRest } = a;
+    const { matches: bMatches, ...bRest } = b;
+    return (shallowEqual(aRest, bRest) &&
+        aMatches.length === bMatches.length &&
+        aMatches.every((match, i) => isSameMatch(match, bMatches[i])));
+};
+/**
+ * Provides a view's RouteContext, reusing the previous value while its content
+ * is unchanged or while `hold` is set (the view is not the one being shown), so
+ * RouteContext-only readers like useParams skip re-rendering. Kept in component
+ * state since two outlets with the same id share view items.
+ */
+const ViewRouteContextProvider = ({ value, hold, children }) => {
+    const [heldValue, setHeldValue] = React.useState(value);
+    if (!hold && heldValue !== value && !isSameRouteContext(heldValue, value)) {
+        setHeldValue(value);
+    }
+    return React.createElement(UNSAFE_RouteContext.Provider, { value: heldValue }, children);
+};
 class ReactRouterViewStack extends ViewStacks {
     /**
      * Stores the computed parent path for each outlet.
@@ -894,6 +958,8 @@ class ReactRouterViewStack extends ViewStacks {
             viewItem.mount = true;
             viewItem.routeData.match = match;
         }
+        // Set when a more specific sibling owns the pathname, so this view is hidden even though it matches.
+        let hiddenBySpecificMatch = false;
         // Deactivate wildcard (catch-all) and empty-path (default) routes when a more-specific route matches.
         // This prevents "Not found" or fallback pages from showing alongside valid routes.
         if (routePath === '*' || routePath === '/*' || routePath === '') {
@@ -950,6 +1016,7 @@ class ReactRouterViewStack extends ViewStacks {
                 }
             }
             if (hasSpecificMatch && !isSwipeRevealed(viewItem)) {
+                hiddenBySpecificMatch = true;
                 // A splat can be the outlet's container page rather than a "not found" fallback.
                 // Pushed over it is the page underneath, so unmounting it destroys its state and
                 // leaves nothing for back to reveal. Hiding it below covers that. A view with no
@@ -972,6 +1039,11 @@ class ReactRouterViewStack extends ViewStacks {
             viewItem.routeData.match = match;
         }
         const routeMatch = shouldSkipForDifferentParam ? viewItem.routeData?.match : match || viewItem.routeData?.match;
+        // Hold the RouteContext while the view isn't the one shown: a sibling owns the pathname, it's
+        // parked on another param instance, or it doesn't match. A pathless default only strictly
+        // matches at "/", so a missing match there doesn't mean it's hidden.
+        const isPathlessDefault = !routePath && !viewItem.routeData?.childProps?.index;
+        const holdRouteContext = hiddenBySpecificMatch || !!shouldSkipForDifferentParam || (!match && !isPathlessDefault);
         return (React.createElement(UNSAFE_RouteContext.Consumer, { key: `view-context-${viewItem.id}` }, (parentContext) => {
             const parentMatches = (parentContext?.matches ?? []);
             // Accumulate params from parent matches, with fallback to other outlets
@@ -987,7 +1059,7 @@ class ReactRouterViewStack extends ViewStacks {
                 ? { ...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)));
+                React.createElement(ViewRouteContextProvider, { value: routeContextValue, hold: holdRouteContext }, componentElement)));
         }));
     };
     /**
@@ -3106,26 +3178,6 @@ const checkIsMultiStepBack = (prevInfo, destinationPathname, history) => {
     }
     return false;
 };
-const areParamsEqual = (a, b) => {
-    const paramsA = a || {};
-    const paramsB = b || {};
-    const keysA = Object.keys(paramsA);
-    const keysB = Object.keys(paramsB);
-    if (keysA.length !== keysB.length) {
-        return false;
-    }
-    return keysA.every((key) => {
-        const valueA = paramsA[key];
-        const valueB = paramsB[key];
-        if (Array.isArray(valueA) && Array.isArray(valueB)) {
-            if (valueA.length !== valueB.length) {
-                return false;
-            }
-            return valueA.every((entry, idx) => entry === valueB[idx]);
-        }
-        return valueA === valueB;
-    });
-};
 const IonRouter = ({ children, registerHistoryListener }) => {
     const location = useLocation();
     const navigate = useNavigate();