fix(tabs, tab-bar): use standalone tab bar in Vue, React

[thetaPC]

Issue number: resolves #29885, resolves #29924

---

What is the current behavior?

React and Vue:

Tab bar could be a standalone element within IonTabs and would navigate without issues with a router outlet before v8.3:

<IonTabs>
  <IonRouterOutlet></IonRouterOutlet>

  <IonTabBar></IonTabBar>
</IonTabs>

It would work as if it was written as:

<IonTabs>
  <IonRouterOutlet></IonRouterOutlet>

  <IonTabBar slot="bottom">
    <!-- Buttons -->
  </IonTabBar>
</IonTabs>

After v8.3, any ion-tab-bar that was not a direct child of ion-tabs would lose it's expected behavior when used with a router outlet. If a user clicked on a tab button, then the content would not be redirected to that expected view.

React only:

Users can no longer add a ref to the IonRouterOutlet, it always returns undefined.

<IonTabs>
      <IonRouterOutlet ref={ref}>

     <IonTabBar slot="bottom">
    <!-- Buttons -->
  </IonTabBar>
</IonTabs>

What is the new behavior?

The fixes were already reviewed through PR #29925 and PR #29927. I split them to make it easier to review.

React and Vue:

The React tabs has been updated to pass data to the tab bar through context instead of passing it through a ref. By using a context, the data will be available for the tab bar to use regardless of its level.

React only:

Reverted the logic for routerOutletRef and added a comment of the importance of it.

Does this introduce a breaking change?

• Yes
• No

Other information

N/A

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 16, 2024 3:14pm