React Navigation with login screen then dashboard with tabs

Ionic Framework Ionic React
1

I’m struggling to get a simple routing flow working.

Basically want to start with a few pages on app loaded; namely login, create account, landing page. So routing between these. Then once logged in, switch to a dashboard with tabs for navigation.

So in my current attempt, the root of the app renders this…

    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/" component={Landing} exact />
        <Route path="/account/create" component={CreateAccount} exact />
        <Route path="/dashboard" component={Dashboard} exact />
        <Route path="/account/login" component={Login} exact />
        <Redirect from="/" to="/" />
      </IonRouterOutlet>
    </IonReactRouter>

then the dashboard page renders this…

 <IonTabs>
      <IonRouterOutlet>
        <Redirect path="/dashboard" to="/birthdays" exact />
        <Route path="/birthdays" component={BirthdayList} exact />
        <Route path="/birthday-add" component={AddBirthday} exact />
        <Route path="/birthday-edit/:id" component={EditBirthday} exact />
        <Route path="/birthday-view/:id" component={ViewBirthday} exact />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="birthdays" href="/birthdays">
          <IonIcon icon={listOutline} />
          <IonLabel>Birthdays</IonLabel>
        </IonTabButton>
        <IonTabButton tab="birthday-add" href="/birthday-add">
          <IonIcon icon={addOutline} />
          <IonLabel>Add Birthday</IonLabel>
        </IonTabButton>
        <IonTabButton tab="tab3" onClick={() => firebase.auth().signOut()}>
          <IonIcon icon={personOutline} />
          <IonLabel>Profile</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>

So I can see the landing page, then switch to the login page, then on logging in, it will send me to the dashboard. Except the page is not being displayed in the dashboard because of this line…

Screen Shot 2020-07-21 at 10.22.49 AM

i.e.

.ion-page-invisible {
    opacity: 0;
}

Not sure if this is a bug or a routing issue. Also not sure if this is the correct way to do this with IonReactRouter?

I did try following the docs here by changing the tabs code for the path attribute for the Route component to

    <IonTabs>
      <IonRouterOutlet>
        <Redirect path="/dashboard" to="/birthdays" exact />
        <Route path="/:tab(birthdays)" component={BirthdayList} exact />
        <Route path="/:tab(birthday-add)" component={AddBirthday} exact />
        <Route path="/:tab(birthday-edit)/:id" component={EditBirthday} exact />
        <Route path="/:tab(birthday-view)/:id" component={ViewBirthday} exact />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="birthdays" href="/birthdays">
          <IonIcon icon={listOutline} />
          <IonLabel>Birthdays</IonLabel>
        </IonTabButton>
        <IonTabButton tab="birthday-add" href="/birthday-add">
          <IonIcon icon={addOutline} />
          <IonLabel>Add Birthday</IonLabel>
        </IonTabButton>
        <IonTabButton tab="tab3" onClick={() => firebase.auth().signOut()}>
          <IonIcon icon={personOutline} />
          <IonLabel>Profile</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>

but this made no difference to the hidden page.

2

In your configuration /dashboard maps to the Dashboard component but that then redirects to /birthdays, and there is no Route matching /birthdays at the top level. That’s why nothing gets displayed I guess.

This example shows how to do something similar. Have a look at App and AppTabs.

3

there is nothing here in this code the represents any effort to protect routes or show authentication? Where is the effort on your part… at least post what you have tried

4

Thanks @mirkobalzarini Your example was super helpful. It cleared up the ion-page-invisible issue too.

Working solution for root component

    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/" component={Landing} exact />
        <Route path="/register" component={CreateAccount} exact />
        <Route path="/login" component={Login} exact />
        <Route path="/my/birthdays" component={Dashboard} />
      </IonRouterOutlet>
    </IonReactRouter>

and Dashboard component

    <IonTabs>
      <IonRouterOutlet>
        <Route path="/my/birthdays/list" component={BirthdayList} exact />
        <Route path="/my/birthdays/add" component={AddBirthday} exact />
        <Route path="/my/birthdays/view/:key" component={ViewBirthday} exact />
        <Route path="/my/birthdays/edit/:key" component={EditBirthday} exact />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="birthdays" href="/my/birthdays/list">
          <IonIcon icon={listOutline} />
          <IonLabel>Birthdays</IonLabel>
        </IonTabButton>
        <IonTabButton tab="add" href="/my/birthdays/add">
          <IonIcon icon={addOutline} />
          <IonLabel>Add Birthday</IonLabel>
        </IonTabButton>
        <IonTabButton tab="logout" onClick={() => firebase.auth().signOut()}>
          <IonIcon icon={logOutOutline} />
          <IonLabel>Log out</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>