@ionic/react 8.7.12 → 8.7.13-dev.11765426479.16a61ecf

package/dist/index.js

@@ -1331,10 +1331,10 @@ class OutletPageManager extends React.Component {
         this.ionLifeCycleContext.ionViewDidLeave();
     }
     render() {
-        const { StackManager, children, routeInfo, ...props } = this.props;
+        const { StackManager, children, routeInfo, id, ...props } = this.props;
         return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
                 this.ionLifeCycleContext = context;
-                return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
+                return (jsx(StackManager, { routeInfo: routeInfo, id: id, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), id: id, ...props, children: children }) }));
             } }));
     }
     static get contextType() {
@@ -1345,11 +1345,13 @@ class OutletPageManager extends React.Component {
 class IonRouterOutletContainer extends React.Component {
     constructor(props) {
         super(props);
+        this.outletId = props.id ?? `routerOutlet-${generateId('routerOutlet')}`;
     }
     render() {
         const StackManager = this.context.getStackManager();
         const { children, forwardedRef, ...props } = this.props;
-        return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, children: jsx(IonRouterOutletInner, { ...props, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
+        const outletId = props.id ?? this.outletId;
+        return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, id: outletId, children: jsx(IonRouterOutletInner, { ...props, id: outletId, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
     }
     static get contextType() {
         return NavContext;
@@ -2228,6 +2230,7 @@ const RouteManagerContext = /*@__PURE__*/ React.createContext({
     findLeavingViewItemByRouteInfo: () => undefined,
     findViewItemByRouteInfo: () => undefined,
     getChildrenToRender: () => undefined,
+    getViewItemsForOutlet: () => [],
     goBack: () => undefined,
     unMountViewItem: () => undefined,
 });
@@ -2346,7 +2349,14 @@ class LocationHistory {
     _replace(routeInfo) {
         const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
         routeInfos && routeInfos.pop();
-        this.locationHistory.pop();
+        // Get the current route that's being replaced
+        const currentRoute = this.locationHistory[this.locationHistory.length - 1];
+        // Only pop from global history if we're replacing in the same outlet context.
+        // Don't pop if we're entering a nested outlet (current route has no tab, new route has a tab)
+        const isEnteringNestedOutlet = currentRoute && !currentRoute.tab && !!routeInfo.tab;
+        if (!isEnteringNestedOutlet) {
+            this.locationHistory.pop();
+        }
         this._add(routeInfo);
     }
     _clear() {