React IonTabs as nested route

Hey there,

I am trying to implement Tabs layout for some of the routes an non Tab layout for the others.

For example, I want my login page to have no Tabs, and then only after user is Authed to move to the tabs layout which has the rest of the pages.

Has anyone implemented such a flow?

The problem I run into is An IonRouterOutlet should also not be a descendant from another IonRouterOutlet

I tried using the login route out of the router outlet but then the navigation gets messed up.

Also tried just Hiding the IonTabBar on certain routes but I get an error that IonTabs must have an IonTabBar as a child.

Thanks

Hi, I don’t speak English very well but I will try it, I am searching the same problem but I didn’t find any results.

I think that you can create other page with a new IonRouterOutlet and from your App.tsx have something like this:

App.tsx

<IonApp>
         <IonReactRouter>
            <IonRouterOutlet>
              <Route path="/login" component={Login} />
               <Route path="/dashboard" component={DashboardPage} />
            </IonRouterOutlet>
         </IonReactRouter>
    </IonApp>

Dashboard.tsx

  <IonTabs onIonTabsDidChange={handleChange}>
        <IonRouterOutlet>
          <Route exact={true} path='/dashboard/inbox' component={Inbox} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="inbox" href="/inbox">
             TAB INBOX
          </IonTabButton>
      </IonTabBar>
 </IonTabs>

It worked for me

1 Like