diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx
index 7ae5c9e7cd..f1a66440fc 100644
--- a/packages/react/src/components/navigation/IonTabBar.tsx
+++ b/packages/react/src/components/navigation/IonTabBar.tsx
@@ -212,8 +212,10 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
       if (this.props.onIonTabsDidChange) {
         this.props.onIonTabsDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
       }
-      this.setActiveTabOnContext(e.detail.tab);
-      this.context.changeTab(e.detail.tab, currentHref, e.detail.routeOptions);
+      if (this.props.routerOutletRef?.current) {
+        this.setActiveTabOnContext(e.detail.tab);
+        this.context.changeTab(e.detail.tab, currentHref, e.detail.routeOptions);
+      }
     }
   }
 
diff --git a/packages/vue/src/components/IonTabBar.ts b/packages/vue/src/components/IonTabBar.ts
index 74879390f1..24e8134540 100644
--- a/packages/vue/src/components/IonTabBar.ts
+++ b/packages/vue/src/components/IonTabBar.ts
@@ -51,7 +51,7 @@ export const IonTabBar = defineComponent({
     };
   },
   updated() {
-    this.setupTabState(inject("navManager"));
+    this.setupTabState(inject("navManager", null));
   },
   methods: {
     setupTabState(ionRouter: any) {
@@ -127,13 +127,13 @@ export const IonTabBar = defineComponent({
      */
     checkActiveTab(ionRouter: any) {
       const hasRouterOutlet = this.$props._hasRouterOutlet;
-      const currentRoute = ionRouter.getCurrentRouteInfo();
+      const currentRoute = ionRouter?.getCurrentRouteInfo();
       const childNodes = this.$data.tabVnodes;
       const { tabs, activeTab: prevActiveTab } = this.$data.tabState;
       const tabKeys = Object.keys(tabs);
       let activeTab = tabKeys.find((key) => {
         const href = tabs[key].originalHref;
-        return currentRoute.pathname.startsWith(href);
+        return currentRoute?.pathname.startsWith(href);
       });
 
       /**
@@ -170,17 +170,20 @@ export const IonTabBar = defineComponent({
          * If we went to tab2 then back to tab1, we should
          * land on /tabs/tab1/child instead of /tabs/tab1.
          */
-        if (activeTab !== prevActiveTab || prevHref !== currentRoute.pathname) {
+        if (
+          activeTab !== prevActiveTab ||
+          prevHref !== currentRoute?.pathname
+        ) {
           /**
            * By default the search is `undefined` in Ionic Vue,
            * but Vue Router can set the search to the empty string.
            * We check for truthy here because empty string is falsy
            * and currentRoute.search cannot ever be a boolean.
            */
-          const search = currentRoute.search ? `?${currentRoute.search}` : "";
+          const search = currentRoute?.search ? `?${currentRoute.search}` : "";
           tabs[activeTab] = {
             ...tabs[activeTab],
-            currentHref: currentRoute.pathname + search,
+            currentHref: currentRoute?.pathname + search,
           };
         }
 
@@ -189,7 +192,7 @@ export const IonTabBar = defineComponent({
          * set the previous tab back to its original href.
          */
         if (
-          currentRoute.routerAction === "pop" &&
+          currentRoute?.routerAction === "pop" &&
           activeTab !== prevActiveTab
         ) {
           tabs[prevActiveTab] = {
@@ -226,7 +229,7 @@ export const IonTabBar = defineComponent({
         if (activeChild) {
           tabDidChange && this.$props._tabsWillChange(activeTab);
 
-          if (hasRouterOutlet && ionRouter) {
+          if (hasRouterOutlet && ionRouter !== null) {
             ionRouter.handleSetCurrentTab(activeTab);
           }
 
@@ -246,11 +249,11 @@ export const IonTabBar = defineComponent({
     },
   },
   mounted() {
-    const ionRouter: any = inject("navManager");
+    const ionRouter: any = inject("navManager", null);
 
     this.setupTabState(ionRouter);
 
-    ionRouter.registerHistoryChangeListener(() =>
+    ionRouter?.registerHistoryChangeListener(() =>
       this.checkActiveTab(ionRouter)
     );
   },
diff --git a/packages/vue/src/components/IonTabButton.ts b/packages/vue/src/components/IonTabButton.ts
index b5105a125a..b110a6209e 100644
--- a/packages/vue/src/components/IonTabButton.ts
+++ b/packages/vue/src/components/IonTabButton.ts
@@ -27,7 +27,7 @@ export const IonTabButton = /*@__PURE__*/ defineComponent({
     defineCustomElement();
 
     // TODO(FW-2969): type
-    const ionRouter: any = inject("navManager");
+    const ionRouter: any = inject("navManager", null);
     const onClick = (ev: Event) => {
       if (ev.cancelable) {
         ev.preventDefault();
@@ -72,12 +72,14 @@ export const IonTabButton = /*@__PURE__*/ defineComponent({
        * should direct users back to the root
        * of the tab.
        */
-      if (prevActiveTab === tab) {
-        if (originalHref !== currentHref) {
-          ionRouter.resetTab(tab);
+      if (ionRouter !== null) {
+        if (prevActiveTab === tab) {
+          if (originalHref !== currentHref) {
+            ionRouter.resetTab(tab);
+          }
+        } else {
+          ionRouter.changeTab(tab, currentHref);
         }
-      } else {
-        ionRouter.changeTab(tab, currentHref);
       }
     };
     return () => {