IonTabs must contain an IonRouterOutlet

Ionic Framework Ionic React
1

Hey, Im having a weird issue with IonTabs.

First of all, this is my related code:

const Menu = props => {
  return(
    <IonContent>
      <IonTabs>
        <TabRouters />
        <IonTabBar>
          <IonTabButton>
            A
          </IonTabButton>
          <IonTabButton>
            B
          </IonTabButton>
          <IonTabButton>
            C
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonContent>
  )
}

Inside the component is a 

export const TabRouters = props => {
  return(
    <IonRouterOutlet>
        //routers
    </IonRouterOutlet>
  )
}

This actually throws this error:

Error: IonTabs must contain an IonRouterOutlet

But when I paste whats returned in the component directly into the component, it works.
This must be a bug, which really confuses me. I’d really like to have the <IonRouterOutlet in a seperate component.

I am very new at Ionic, so maybe I am doing something wrong, I dont see…

Im grateful for any help!

2

I strongly urge individuals who are starting out with ionic to use the templates/starter apps that are generated by the CLI to get started and better understand the UI components.

Screen Shot 2021-02-19 at 7.38.05 PM
Screen Shot 2021-02-19 at 7.38.05 PM2746×1216 353 KB

Also not quite sure what you are trying to accomplish? You have Tabs in a menu?

3

Also not quite sure what you are trying to accomplish? You have Tabs in a menu?

I have a component called where the tab navigation is inside…

So you dont get my problem? Should I try to explain it further?

4

Sorry to pick this up nearly two years later, but im getting this error after removing the ion-router-outlet because I have it in my App.vue file, and im basically getting two pages of everything, so I have two ID’s - which I can’t have - I need to append an item and it will pick the first ID which is hidden…

5

This is a thread in the React forum, not the Vue forum, so it would be better to make a new post that shows your code in the Vue forum.