diff --git a/packages/react/src/components/IonRouterContext.tsx b/packages/react/src/components/IonRouterContext.tsx index 50936fdfbb..ff543fd2f6 100644 --- a/packages/react/src/components/IonRouterContext.tsx +++ b/packages/react/src/components/IonRouterContext.tsx @@ -44,10 +44,11 @@ export function useIonRouter(): UseIonRouterResult { push: context.push, goBack: context.back, canGoBack: context.canGoBack, + routeInfo: context.routeInfo, }; } -type UseIonRouterResult = { +export type UseIonRouterResult = { /** * @deprecated - Use goBack instead * @param animationBuilder - Optional - A custom transition animation to use @@ -77,4 +78,5 @@ type UseIonRouterResult = { * Determines if there are any additional routes in the the Router's history. However, routing is not prevented if the browser's history has more entries. Returns true if more entries exist, false if not. */ canGoBack(): boolean; + routeInfo: RouteInfo; }; diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx index 23ab7ecc57..c0a2bfd5cb 100644 --- a/packages/react/src/components/navigation/IonTabBar.tsx +++ b/packages/react/src/components/navigation/IonTabBar.tsx @@ -46,7 +46,7 @@ class IonTabBarUnwrapped extends React.PureComponent { - if (child != null && child.props && child.type === IonTabButton) { + if ( + child != null && + child.props && + (child.type === IonTabButton || (child as any).type.isTabButton) + ) { const href = child.props.tab === activeTab ? this.props.routeInfo?.pathname diff --git a/packages/react/src/components/navigation/IonTabs.tsx b/packages/react/src/components/navigation/IonTabs.tsx index f53a144916..16011d7810 100644 --- a/packages/react/src/components/navigation/IonTabs.tsx +++ b/packages/react/src/components/navigation/IonTabs.tsx @@ -95,19 +95,22 @@ export class IonTabs extends React.Component { if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) { return; } - if (child.type === IonRouterOutlet) { + if (child.type === IonRouterOutlet || child.type.isRouterOutlet) { outlet = React.cloneElement(child, { tabs: true }); } else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) { outlet = child.props.children[0]; } - if (child.type === IonTabBar) { + if (child.type === IonTabBar || child.type.isTabBar) { const { onIonTabsDidChange, onIonTabsWillChange } = this.props; tabBar = React.cloneElement(child, { onIonTabsDidChange, onIonTabsWillChange, ref: this.tabBarRef, }); - } else if (child.type === Fragment && child.props.children[1].type === IonTabBar) { + } else if ( + child.type === Fragment && + (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar) + ) { const { onIonTabsDidChange, onIonTabsWillChange } = this.props; tabBar = React.cloneElement(child.props.children[1], { onIonTabsDidChange,