It is possible to add more than 3 tab in a IonTabs?

Ionic Framework
1

Hello,

Is it possible to put more than 3 tabs in an IonTabs, and have more than 3 IonTabButton in the IonTabBar?

Let me explain:

I created an IonTabs and the corresponding IonRouterOutlet, in the IonTabBar, I have 6 buttons (1 per destination tab), the components of these tabs are all identical.

I manage to go on tab 1 to 3 without problem. but when I try to go to tab 4-5-6, impossible, nothing is rendered.

I tried to swap the components to check that it is not one of the components that would have a bug…(component 4 put on tab 3 → no problem
and vice versa to see if it came from my routes…(component 3 put on tab 4->no problem

in short:

if I place my components 1-2-3 in tabs 1-2-3->OK (I see my components)
and components 4-5-6 in the 4-5-6 ->KO tabs (the url changes but nothing appears)

if I place my components 4-5-6 in the tabs 1-2-3-> OK (I see my components)
and the components 1-2-3 in the tabs 1-2-3 → KO (the url changes but nothing is rendered)

I would be tempted to think that my routes 4-5-6 have a problem, but they are identical to 1-2-3 (apart from tab4 and /tabs/tab4 instead of tab1 and /tbs/tab1)

I wonder (and ask you) if it is possible to have more than 3 buttons and more than 3 tabs (one button per tab) ???

Thank you in advance for your help.

    <Route path="/tabs" component={<EquipeTabsMenu/>} exact={true} />

    <Route exact path="/" render={() => <Redirect to="/page/ligue" />} />
    </switch>
  </IonRouterOutlet>
  <IonTabBar slot="bottom">

    <IonTabButton tab="tab1" href="/tabs/tab1">
      <FontAwesomeIcon icon={faList} color="var(--ion-color-primary)" size="3x" />
    </IonTabButton>

    <IonTabButton tab="tab2" href="/tabs/tab2">
      <FontAwesomeIcon icon={faUsers} color="var(--ion-color-primary)" size="3x" />
    </IonTabButton>
    <IonTabButton tab="tab4" href="/tabs/tab4">
      
      <FontAwesomeIcon icon={faHouse} color="var(--ion-color-primary)" size="3x" />
    </IonTabButton>
    <IonTabButton tab="tab3" href="/tabs/tab3">
      <FontAwesomeIcon icon={faSignal5} color="var(--ion-color-primary)" size="3x" />
    </IonTabButton>
  
    <IonTabButton tab="tab5" href="/tabs/tab5">
      <FontAwesomeIcon icon={faArrowDownUpAcrossLine} color="var(--ion-color-primary)" size="3x" />
    </IonTabButton>
    <IonTabButton tab="tab6" href="/tabs/tab6">
      <FontAwesomeIcon icon={faFutbol} color="var(--ion-color-primary)" size="3x" />
    </IonTabButton>
  </IonTabBar>

</IonTabs>
2

Hello, yes, it is possible more than 3 tabs.
If I really understand your problem, maybe this tutorial will help you.