Ionic 5 React Tabs starter * IonTab overlaps Login Page Display

Ionic Framework Ionic React
1

this is my app.tsx and loginpage output, can someone please help me? i don’t know what’s going on, thank you so much

101213040_270429004155853_6260251520701300736_n
101213040_270429004155853_6260251520701300736_n690×683 38 KB
Screen Shot 2020-06-04 at 11.54.01 AM
Screen Shot 2020-06-04 at 11.54.01 AM380×646 13.7 KB

2

Your Login route is outside of the <IonRouterOutlet>
You just need to wrap everything with another IonRouterOutlet component.

<IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/login" component={Login} exact={true} />
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/tab1" component={Tab1} exact={true} />
            <Route path="/tab2" component={Tab2} exact={true} />
            <Route path="/tab3" component={Tab3} />
            <Route
              path="/"
              render={() => <Redirect to="/tab1" />}
              exact={true}
            />
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="tab1" href="/tab1">
              <IonIcon icon={triangle} />
              <IonLabel>Tab 1</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab2" href="/tab2">
              <IonIcon icon={ellipse} />
              <IonLabel>Tab 2</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab3" href="/tab3">
              <IonIcon icon={square} />
              <IonLabel>Tab 3</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonRouterOutlet>
    </IonReactRouter>
3

check this video - https://www.youtube.com/watch?v=9yVQfuYSWOE

const App: React.FC = () => {
  const { authValues } = React.useContext(AuthContext);

  return (
    <IonApp>
      {!authValues.authenticated ? (
        <IonReactRouter>
          <Route path="/login" component={LoginPage} exact={true} />
          <Route
            path="/"
            render={() => <Redirect to="/login" />}
            exact={true}
          />
          <Route
            path="*"
            render={() => <Redirect to="/login" />}
            exact={true}
          />
        </IonReactRouter>
      ) : (
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              {/* specify route to each of teh tabs*/}
              <Route path="/tab1" component={Tab1} exact={true} />
              <Route path="/tab2" component={Tab2} exact={true} />
              <Route
                path="/tab2/tab-detail"
                component={TabDetail}
                exact={true}
              />
              {/* default route is to tab1 */}
              <Route
                path="/"
                render={() => <Redirect to="/tab1" />}
                exact={true}
              />
            </IonRouterOutlet>
            {/* draw what the tab bar should look like*/}
            <IonTabBar slot="bottom">
              <IonTabButton tab={"tab1"} href={"/tab1"}>
                <IonLabel>{"Tab One"}</IonLabel>
              </IonTabButton>
              <IonTabButton tab={"tab2"} href={"/tab2"}>
                <IonLabel>{"Tab Two"}</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      )}
    </IonApp>
  );
};

export default App;