Ionic React How can I hide the IonTabs, I'm so desperate please help ASAPPP

Ionic Framework
1 
<IonTabBar slot="bottom">
        <IonTabButton tab="myWarranty" href="/myWarranty">
          <IonIcon icon={document} />
          <IonLabel>Warranty</IonLabel>
        </IonTabButton>
        <IonTabButton tab="addWarranty" href="/addWarranty">
          <IonIcon icon={addCircleOutline} />
          <IonLabel>Add Warranty</IonLabel>
        </IonTabButton>
        <IonTabButton tab="history" href="/history">
          <IonIcon icon={refresh} />
          <IonLabel>History</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>

I want the tab bar declared in App.tsx to be hidden in some page like signin, login what should I write

const SignIn: React.FC = (props) => { …}

what would be the approach for Signin?

1 Like
2

it should be a seperate route… in this example, the Tab routes are laid out in the HomePage Component

  <IonReactRouter>
    <IonApp>
      <Switch>
        <Redirect exact from="/" to="home" />
        <Route path="/login" component={LoginPage} />
        <IonRouterOutlet>
          <Route path="/register" component={RegistrationPage} />
          <PrivateRoute name="home" path="/home" component={HomePage} />
          <PrivateRoute
            path="/tab1-detail/:id"
            component={TabOneDetailPage}
          />
        </IonRouterOutlet>
      </Switch>
    </IonApp>
  </IonReactRouter>

Take a look at this project for more informtion: https://github.com/aaronksaunders/ionic-react-auth-firebase

1 Like