Ionic React: Routing outside Tabs – correct way? (Tabs → standalone page causes background flicker)

Ionic Framework Ionic React
1

I’m using Ionic React with IonTabs. From a tab page I need to navigate to a page that should not show Tabs (standalone / “external” page).

Navigation works, but during transitions (push / pop) I see a background flicker — for a split second the Tabs layout background (or previous outlet) flashes.

Here is my current structure:
App.tsx

<IonApp>
  <IonReactRouter>
    <IonRouterOutlet>
      {/* --- WIZARD BRANCH --- */}
      <Route exact path="/wizard/step1" component={Wiz01Welcome} />
      <Route exact path="/wizard/step2" component={Wiz02Mode} />
      <Route exact path="/wizard/step3" component={Wiz03Login} />
      {/* --- TABS ENTRY --- */}
      <Route path="/app/main" component={Main} />
    </IonRouterOutlet>
  </IonReactRouter>
</IonApp>

Main.tsx (Tabs layout)

<IonTabs>
  <IonRouterOutlet>
    <Route exact path="/app/main">
      <Redirect to="/app/main/home" />
    </Route>

    <Route path="/app/main/home" render={() => <MainDashboard />} exact={true} />
    <Route path="/app/main/tab2" render={() => <MainTab2 />} exact={true} />
  </IonRouterOutlet>

  <IonTabBar slot="bottom" mode="ios" color="light">
    <IonTabButton tab="home" href="/app/main/home">
      <IonIcon icon={homeOutline} />
      <IonLabel>Home</IonLabel>
    </IonTabButton>

    <IonTabButton tab="tab2" href="/app/main/tab2">
      <IonIcon icon={restaurantOutline} />
      <IonLabel>Food</IonLabel>
    </IonTabButton>
  </IonTabBar>
</IonTabs>

From MainDashboard / MainTab2 I need to open something like /wizard/step1 (no tabs). That’s where the flicker happens.

Questions:

  • What’s the recommended route hierarchy for “Tabs + pages outside Tabs”?
  • Should standalone pages be in the top-level IonRouterOutlet, or inside the Tabs outlet?
  • Is the flicker caused by multiple IonRouterOutlets, missing IonPage wrappers, wrong exact, or something else?
  • Any known gotchas (e.g., href vs routerLink, IonRouterLink, useIonRouter.push) that impact transitions?

If you have a working structure (snippet/repo), please share.

Additional question:
Also: is it OK / recommended to keep the route inside the Tabs layout and just hide the TabBar for some pages? If yes, what’s the best approach?

  • Hide via route match (e.g. useLocation() + list of paths) and conditionally render <IonTabBar />?
  • Hide via CSS only (e.g. class on IonTabs / IonTabBar, display: none)?
  • Any Ionic-specific API/pattern for this (so transitions don’t break / no flicker)?

I’m asking because if routing outside Tabs is tricky, hiding the TabBar might be a simpler workaround—if it’s not an anti-pattern.

Thanks Andy