React IonTabs as nested route

Ionic Framework Ionic React
1

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

2

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

3
1 Like
4

Just make sure that the immediate child of IonRouterOutlet is an IonPage (put nested IonRouterOutlet inside it). Also, the answer provided below by niko20 won’t work well with nested routes, you’ll need to provide a full path to the IonTabButton unlike how he demonstrated (his solution will try to find /inbox at the root level / instead of from /dashboard).

5

I have the same problem, it works, but the animations only work in routes no related with the tabs, my code:

App.tsx

      <IonApp>
        <IonReactRouter>
          <IonContent>
            <IonRouterOutlet>
              <Route path="/home">
                <Home />
              </Route>
              <Route path="/signUp" exact>
                <SignUp />
              </Route>
             </IonRouterOutlet>
          </IonContent>
        </IonReactRouter>
      </IonApp>

Home.tsx

    <IonTabs>
      <IonRouterOutlet>
        <Route path="/home/search" exact>
          <Search />
        </Route>
        <Route path="/home/explore" exact>
          <Explore />
        </Route>
        <Redirect exact path="/home" to="/home/search" />
      </IonRouterOutlet>
      <IonTabBar slot="bottom" className="py-1">
        <IonTabButton tab="search" href="/home/search">
          <IonIcon icon={searchOutline} />
          <IonLabel>{textos["page_buscar"]}</IonLabel>
        </IonTabButton>
        <IonTabButton tab="explore" href="/home/explore">
          <IonIcon icon={navigateOutline} />
          <IonLabel>{textos["page_explorar"]}</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
1 Like