Tab navigation and react router

Ionic Framework Ionic React
1

Hi.

I’m using react-router and Ion Tabs for an app but I’m having an issue when I want to redirect a route after a state change.

Here is my router:

     <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet mode="ios">
            <Route exact path="/dashboard" render={() => <DashboardTab />} />
            <Route exact path="/modules" render={() => <ModulesTab />} />
            <Route exact path="/quizzes" render={() => <QuizzesTab />} />
            <Route exact path="/bulletins" render={() => <BulletinsTab />} />
            <Route
              exact
              path="/dashboard/module-:moduleNumber/chapter-content"
              render={props => {
                return checkIfModuleExistsInCurrentBook(props) ? <ChapterContent /> : <Redirect to="/dashboard" />;
              }}
            />
            <Route
              exact
              path="/modules/module-:moduleNumber"
              render={props => {
                return checkIfModuleExistsInCurrentBook(props) ? <ChapterList /> : <Redirect to="/modules" />;
              }}
            />
            <Route
              exact
              path="/modules/module-:moduleNumber/chapter-content"
              render={props => {
                 return checkIfModuleExistsInCurrentBook(props) ? <ChapterContent /> : <Redirect to="/modules" />;
              }}
            />
            <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
          </IonRouterOutlet>
          <IonTabBar mode="ios" slot="bottom">
            <IonTabButton tab="dashboard" href="/dashboard">
              <TabHighlight />
              <IonIcon src={"./assets/svgs/Tab_Dashboard_Inactive.svg"} />
              <IonLabel>Dashboard</IonLabel>
            </IonTabButton>
            <IonTabButton tab="modules" href="/modules">
              <TabHighlight />
              <IonIcon icon={"./assets/svgs/Tab_Modules_Inactive.svg"} />
              <IonLabel>Modules</IonLabel>
            </IonTabButton>
            <IonTabButton tab="quizzes" href="/quizzes">
              <TabHighlight />
              <IonIcon icon={"./assets/svgs/Tab_Quiz_Inactive.svg"} />
              <IonLabel>Quizzes</IonLabel>
            </IonTabButton>
            <IonTabButton tab="bulletins" href="/bulletins">
              <TabHighlight />
              <IonIcon icon={"./assets/svgs/Tab_Bulletins_Inactive.svg"} />
              <IonLabel>Bulletins</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>

Here is a brief description of the app:
It’s a training guide comprised of two books. The “active” book can be changed from the dashboard. The modules tab shows module content for the active book. One book (book A) has 30 modules (numbered 1-30) of content and the other book (book B) has 25 modules (numbered 1-25) of content. This difference is important. In the modules tab, you can select a module from the active book that will take you to another page within the modules tab to view all chapters for that module. You can then select a chapter that will take you to yet another page within the modules tab to finally view the chapter content.

Here is my problem:

  • I select book A from the dashboard (the one with 30 modules).
  • I navigate to the modules tab and select module number 28.
  • I navigate back to the dashboard tab and change the app’s state by selecting book B (the one with 25 modules). Book B is now the active book.

The modules page (“/modules”) is immediately shown instead of re-rendering the dashboard page (“/dashboard”). Why is this so??

As you can see by the code I’ve provided above, I created a function (checkIfModuleExistsInCurrentBook()) to check if the active book contains the last seen module so that an exception isn’t thrown when it tries to render a page with module data that doesn’t exist (module 28 doesn’t exist in chapter B). Why doesn’t the dashboard remain visible when the active book is changed?

Please help :slight_smile: