@ionic/react 8.7.13-dev.11765472680.117902a6 → 8.7.13-dev.11765486444.14025098

package/dist/index.js

@@ -1331,10 +1331,10 @@ class OutletPageManager extends React.Component {
         this.ionLifeCycleContext.ionViewDidLeave();
     }
     render() {
-        const { StackManager, children, routeInfo, id, ...props } = this.props;
+        const { StackManager, children, routeInfo, ...props } = this.props;
         return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
                 this.ionLifeCycleContext = context;
-                return (jsx(StackManager, { routeInfo: routeInfo, id: id, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), id: id, ...props, children: children }) }));
+                return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
             } }));
     }
     static get contextType() {
@@ -1345,13 +1345,11 @@ 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;
-        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 }));
+        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 }));
     }
     static get contextType() {
         return NavContext;
@@ -1539,6 +1537,18 @@ class IonTabButton extends React.Component {
 }
 
 // TODO(FW-2959): types
+/**
+ * Checks if pathname matches the tab's href using path segment matching.
+ * Avoids false matches like /home2 matching /home by requiring exact match
+ * or a path segment boundary (/).
+ */
+const matchesTab = (pathname, href) => {
+    if (href === undefined) {
+        return false;
+    }
+    const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
+    return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
+};
 class IonTabBarUnwrapped extends React.PureComponent {
     constructor(props) {
         super(props);
@@ -1571,7 +1581,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
         const tabKeys = Object.keys(tabs);
         const activeTab = tabKeys.find((key) => {
             const href = tabs[key].originalHref;
-            return this.props.routeInfo.pathname.startsWith(href);
+            return matchesTab(this.props.routeInfo.pathname, href);
         });
         if (activeTab) {
             this.setState({
@@ -1604,7 +1614,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
         const tabKeys = Object.keys(state.tabs);
         const activeTab = tabKeys.find((key) => {
             const href = state.tabs[key].originalHref;
-            return props.routeInfo.pathname.startsWith(href);
+            return matchesTab(props.routeInfo.pathname, href);
         });
         // Check to see if the tab button href has changed, and if so, update it in the tabs state
         React.Children.forEach(props.children, (child) => {
@@ -2230,7 +2240,6 @@ const RouteManagerContext = /*@__PURE__*/ React.createContext({
     findLeavingViewItemByRouteInfo: () => undefined,
     findViewItemByRouteInfo: () => undefined,
     getChildrenToRender: () => undefined,
-    getViewItemsForOutlet: () => [],
     goBack: () => undefined,
     unMountViewItem: () => undefined,
 });
@@ -2349,14 +2358,7 @@ class LocationHistory {
     _replace(routeInfo) {
         const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
         routeInfos && routeInfos.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.locationHistory.pop();
         this._add(routeInfo);
     }
     _clear() {