Ionic React navigation with multiple routes before viewing tabs

Hi.

My name is Fabian and I’m using Ionic React v7.

The app I’m building needs to have a tabs layout for users who have signed in, and multiple “landing” routes before a user signs in.

Here is my app router file:

// excluded import statements

<IonReactRouter>
  <IonRouterOutlet mode="ios">
    <Route exact path={"/"} render={props => (auth.user ? <Redirect to={"/app/home"} /> : <Redirect to={"/landing"} />)} />
    <Route exact path={"/landing"} component={LandingPage} />
    <Route exact path={"/landing/sign-in"} component={SignInPage} />
    <Route path={"/app"} component={Tabs} />
  </IonRouterOutlet>
</IonReactRouter>

…and here is my tabs file:

// excluded import statements

function Tabs() {
  return (
    <IonTabs>
      <IonRouterOutlet mode="ios">
        <Route exact path={"/app/home"} component={HomeLandingPage} />
        <Route exact path={"/app/home/benefits-fitness-to-practise"} component={FitnessToPractisePage} />
        <Route exact path={"/app/home/past-polls"} component={PastPollsPage} />
        <Route exact path={"/app/home/benefits-paramedic-insight"} component={ParamedicInsightPage} />
        <Route exact path={"/app/home/benefits-british-paramedic-journal"} component={BritishParamedicJournalPage} />
        <Route exact path={"/app/news"} component={NewsLandingPage} />
        <Route exact path={"/app/news/article-:articleId"} component={NewsArticlePage} />
        <Route exact path={"/app/cpd-hub"} component={CPDHubLandingPage} />
        <Route exact path={"/app/cpd-hub/video-:videoId"} component={CPDVideoDetailsPage} />
        <Route exact path={"/app/events"} component={EventsLandingPage} />
        <Route exact path={"/app/events/event-:eventId"} component={EventDetailsPage} />
        <Route exact path={"/app/members"} component={MembersLandingPage} />
        <Route exact path={"/app/members/profile-details"} component={ProfileDetailsPage} />
        <Route exact path={"/app/members/profile-communication-preferences"} component={CommunicationPreferencesPage} />
        <Route exact path={"/app/members/benefits-paramedic-insight"} component={ParamedicInsightPage} />
        <Route exact path={"/app/members/benefits-british-paramedic-journal"} component={BritishParamedicJournalPage} />
        <Route exact path={"/app/members/benefits-fitness-to-practise"} component={FitnessToPractisePage} />
        <Route exact path={"/app/members/benefits-liability-insurance"} component={LiabilityInsurancePage} />
        <Route exact path={"/app/members/benefits-e-learning-resources"} component={ELearningResourcesPage} />
        <Route exact path={"/app/members/benefits-mental-health-and-wellbeing-app"} component={MentalHealthAndWellbeingAppPage} />
        {/* TODO rename to discount-details? */}
        <Route exact path={"/app/members/discounts-:discountId"} component={DiscountPage} />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        {/* Note that icons are set via CSS */}
        <IonTabButton tab="home" href="/app/home">
          <IonIcon className="tab-icon" />
          <IonLabel className="">Home</IonLabel>
          <div className="bg-green-30 w-full absolute top-0 h-3 invisible" style={{}} />
          <IonRippleEffect />
        </IonTabButton>
        <IonTabButton tab="news" href="/app/news">
          <IonIcon className="tab-icon" />
          <IonLabel>News</IonLabel>
          <div className="bg-green-30 w-full absolute top-0 h-3 invisible" style={{}} />
          <IonRippleEffect />
        </IonTabButton>
        <IonTabButton tab="cpd-hub" href="/app/cpd-hub">
          <IonIcon className="tab-icon" />
          <IonLabel>CPD Hub</IonLabel>
          <div className="bg-green-30 w-full absolute top-0 h-3 invisible" style={{}} />
          <IonRippleEffect />
        </IonTabButton>
        <IonTabButton tab="events" href="/app/events">
          <IonIcon className="tab-icon" />
          <IonLabel>Events</IonLabel>
          <div className="bg-green-30 w-full absolute top-0 h-3 invisible" style={{}} />
          <IonRippleEffect />
        </IonTabButton>
        <IonTabButton tab="members" href="/app/members">
          <IonIcon className="tab-icon" />
          <IonLabel>Members</IonLabel>
          <div className="bg-green-30 w-full absolute top-0 h-3 invisible" style={{}} />
          <IonRippleEffect />
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
}

export default Tabs;

  • I’m using the useHistory hook from react-router to navigate between pages/routes.
  • On LandingPage, I call history.push(“/landing/sign-in”) when a user presses a button.
  • Then, on SignInPage, I call history.replace(“/app/home”) when a users has successfully signed in.

My problem is that on Android, if a user presses the hardware back button on the “/app/home” route, it will navigate back to the LandingPage, even though they’ve already signed in. How can I prevent this behaviour? I thought calling history.replace() would do the trick.

I tried using the useIonRouter() hook to call .push(“/landing/sign-in”, “forward”, “replace”) on the LandingPage, and then .push(“/app/home”, “forward”, “replace”) on the SignInPage, which I think works, but the transition animations don’t look right at all.

What am I doing wrong? Basically, I want multiple routes (two in this case) as a stack navigation, and then a separate tabs navigation, where the user can’t simply press the hardware back button to go back to the stack navigation.

Please help :slight_smile:

Anyone have some guidance?