Tabs not working in Ionic 6

I’m updating my application from Ionic 5 to Ionic 6 and I have not not been able to make tabs works.
Tabs are just not loading, I get a blank page instead. No errors are returned

I have created a minimal example following the React navigation information in Ionic docs but it is still not working: ionic-react-tutorial-router-tabs (forked) - CodeSandbox

What am I missing?

Sorry, wrong link. have you tried looking at the docs? React Navigation: Router Link Redirect to Navigate to Another Page

How should the device plugin help me with tabs?

My app is targeted at browsers and I was not using capacitor or any plugin in Ionic 5.
Besides, in the docs you reference there is no mention to tabs.

It turned out that I had messed up my code in the update to Ionic 6.

The issue is solved by using Switch instead of IonRouterOutlet in App.tsx.
Actually, that was already in my code in Ionic 5 but I had changed it during the update.
As a result, this was not related to Ionic 6.

Hi, may I know why you change to Switch? because the IonRouterOutlet is already using a switch under the hood, just curious if you have another reason besides the issue.

Ref : React Navigation: Router Link Redirect to Navigate to Another Page

Hi,
I am using Switch to navigate pages and IonRouterOutlet in one of the pages that includes several tabs.
I am doing so because I had issues when trying to use two IonRouterOutlet (one nested inside the other).
I am not saying it is not possible to do so but I was not able to make my app work that way.

1 Like