Routing with Tab does not work properly

Ionic Framework Ionic React
1

When I tried to have a default route of / and a subroute with tabs
When the page goes back to root route, the Tab still remains but the page is empty

App.tsx

    <IonApp>
      <IonReactRouter>
        <Route path="/auth">
          <Auth />
        </Route>
        <Route exact path="/">
          <Login />
        </Route>
      </IonReactRouter>
    </IonApp>

Tabs.tsx

  <IonPage>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/auth/reports">
            <Reports />
          </Route>
          <Route exact path="/auth/create">
            <Create />
          </Route>
          <Route exact path="/auth/account">
            <Account />
          </Route>
          <Route exact path="/auth">
            <Redirect to="/auth/reports" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="reports" href="/auth/reports">
            <IonIcon icon={barChart} />
            <IonLabel>Reports</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/auth/create">
            <IonIcon icon={addCircle} />
            <IonLabel>Create</IonLabel>
          </IonTabButton>
          <IonTabButton tab="account" href="/auth/account">
            <IonIcon icon={person} />
            <IonLabel>Account</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonPage>

The login page work properly / Root route, but when being routed to /auth then going back to / Login page, the page goes black, but the URL was already been change, I use useHistory of react-router-dom to navigate programaticaly.

Does someone encountered this error?
Any solution to this? :slight_smile:

This is the result when navigating back to login page which is /

Screen Shot 2022-03-29 at 9.28.21 PM
Screen Shot 2022-03-29 at 9.28.21 PM956×1354 27.2 KB

2

I would suggest you start with the tabs template and then add the authentication pages… it looks like you have the routing setup wrong.

But this is something that I see a lot of folks struggle with the first time, I really think there needs to be a template with the Tabs on their own file… SO that is what I got for you here.

//App.tsx

  <IonApp>
    <IonReactRouter>
      <Route exact path="/">
        <Redirect to="/tabs/tab1" />
      </Route>
      <Route exact path="/login">
        <Login />
      </Route>
      <Route path="/tabs">
        <TabRoot />
      </Route>
    </IonReactRouter>
  </IonApp>

then your TabRoot Component

// TabRoot
const TabRoot: React.FC = () => (
  <IonTabs>
    <IonRouterOutlet>
      <Route exact path="/">
        <Redirect to="/tabs/tab1" />
      </Route>
      <Route exact path="/tabs/tab1">
        <Tab1 />
      </Route>
      <Route exact path="/tabs/tab2">
        <Tab2 />
      </Route>
      <Route path="/tabs/tab3">
        <Tab3 />
      </Route>
    </IonRouterOutlet>
    <IonTabBar slot="bottom">
      <IonTabButton tab="tab1" href="/tabs/tab1">
        <IonIcon icon={triangle} />
        <IonLabel>Tab 1</IonLabel>
      </IonTabButton>
      <IonTabButton tab="tab2" href="/tabs/tab2">
        <IonIcon icon={ellipse} />
        <IonLabel>Tab 2</IonLabel>
      </IonTabButton>
      <IonTabButton tab="tab3" href="/tabs/tab3">
        <IonIcon icon={square} />
        <IonLabel>Tab 3</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>
);
2 Likes
3

Wow, thanks, it really works

1 Like