Two Tab Bars Appearing in One Page

In my Ionic React App, there are 3 Tabs.

Different pages have different internal tabs.

When I’m navigating through diff pages, some times these tabs repeats. The earlier page tab remains stuck.

Navigation video could be seen at this link

MobileAppIssue - YouTube

Any help to solve this issue is highly appreciated.

Explanation
I’ve 3 Tab Pages DashboardTabs, TimesheetTabs and ExpenseTabs

  1. DashboardTabs
    It has Tab Buttons for Timesheet and Expense

  2. TimesheetTabs
    It has Tabs for Dashboard, and Few Other Tabs related to this module

  3. ExpenseTabs
    It has Tabs for Dashboard, and Few Other Tabs related to this module

When the issue occurs (steps)?

  • From Dashboard click to go to ‘TimesheetTabs’
  • On TimehseetTabs again click to go to DashboardTabs
  • On DashboardTabs click on ‘ExpenseTabs’
  • On ExpenseTabs click to go to ‘DashboardTabs’

My App.tsx looks as below:

const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main">
 <Menu />
<IonRouterOutlet id="main">
<Route path="/login" component={Login} exact />
<Route path="/demo" component={Demo} exact />
<Route path="/dashboard" component={DashboardTabs}  exact={true} />            
<Route path="/dashboard/view" component={Dashboard}  />
<Route path="/timesheet" component={TimesheetTabs}  />
<Route path="/timesheet/calendar/:date" component={TimesheetTabs}  exact={true}  />            <Route path="/timesheet/create/:date" component={TimeEntryForm}  exact={true} />    <Route path="/timesheet/update/:trackingId" component={TimeEntryForm}  exact={true} />    <Route path="/timesheet/view/:trackingId" component={ViewTime}  exact={true} />
<Route path="/my-profile" component={MyProfile}  />
<Route path="/lead" component={LeadTabs}  />
<Route path="/expense" component={ExpenseTabs}  />
<Route path="/expense/create" component={ExpenseForm}  /> 
<Route path="/expense/update/:expenseId" component={ExpenseForm}  exact={true} />    <Route path="/register" component={Register} exact />
<Route path="/home" component={Home} exact />
<Route path="/documents" component={DocumentList} exact />
<Route path="/leave-application" component={LeaveApplication} exact />
<Route path="/document/upload-document" component={UploadDocument} exact />
<Route exact path="/" render={() => <Redirect to="/login" />} />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter></IonApp>
);

export default App;

DashboardTabs is a Tab Page that looks as below:

const DashboardTabs: React.FC = () => {

return (
<IonTabs>
      <IonRouterOutlet>
        <Route exact  path="/dashboard" component={Dashboard}  />
        <Route path="/timesheet" component={TimesheetTabs} exact={true} />      
        <Route path="/expense" component={ExpenseTabs} exact={true} />      
      </IonRouterOutlet>

      <IonTabBar slot="bottom">
        <IonTabButton tab="calendar"   href="/timesheet">
          <IonIcon icon={calendar} />
          <IonLabel>Timesheet</IonLabel>
        </IonTabButton>
        <IonTabButton tab="expense" href="/expense">
          <IonIcon icon={cardOutline} />
          <IonLabel>Expenses</IonLabel>
        </IonTabButton>
        <IonTabButton href="javascript:void(0)"  >
          <IonIcon onClick={() => setShowActionSheet(true)} icon={ellipsisVerticalOutline} />
          <IonLabel>Others</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
};

export default DashboardTabs;

TimesheetTabs is a Tab Page which looks as below:

const TimesheetTabs: React.FC = () => {
return (
    <IonTabs>
      <IonRouterOutlet>
      <Route path="/timesheet/calendar" component={TimesheetCalendar} exact={true} />
        <Route path="/timesheet/calendar/:date" component={TimesheetCalendar} exact={true} />
        <Route path="/timesheet/analysis" component={TimeAnalysis} exact={true} />
        <Route path="/timesheet/timer" component={Timer}  exact={true}/>          
        <Route exact path="/timesheet" render={() => <Redirect to="/timesheet/calendar" />} />
      </IonRouterOutlet>

      <IonTabBar slot="bottom">
        <IonTabButton tab="home"   href="/dashboard">
          <IonIcon icon={homeOutline} color="warning" />
          <IonLabel>Dashboard</IonLabel>
        </IonTabButton>

        <IonTabButton tab="calendar"   href="/timesheet/calendar">
          <IonIcon icon={calendar} />
          <IonLabel>Timesheet</IonLabel>
        </IonTabButton>

       <IonTabButton tab="timer" href="/timesheet/timer">
          <IonIcon icon={stopwatchOutline} />
          <IonLabel>Timer</IonLabel>
        </IonTabButton>

        <IonTabButton tab="analysis" href="/timesheet/analysis">
          <IonIcon icon={barChart} />
          <IonLabel>Analyze</IonLabel>
        </IonTabButton>

      </IonTabBar>
    </IonTabs>
  );
};
export default TimesheetTabs;

ExpenseTabs is a Tab Page that looks as below:

const ExpenseTabs: React.FC = () => {
return (
    <IonTabs>
      <IonRouterOutlet>
        
        <Route path="/expense/list" component={ExpenseList} exact={true} />
        <Route path="/expense/analysis" component={ExpenseAnalysis} exact={true} />
        <Route path="/expense/new-expense" component={ExpenseForm} exact={true} />
        <Route path="/expense" render={() => <Redirect to="/expense/list" />} exact={true} />
      </IonRouterOutlet>

      <IonTabBar slot="bottom">
        <IonTabButton tab="home"  href="/dashboard" >
          <IonIcon icon={homeOutline} color="warning" />
          <IonLabel>Dashboard</IonLabel>
        </IonTabButton>

        <IonTabButton tab="calendar"   href="/expense/list">
          <IonIcon icon={calendar} />
          <IonLabel>My Expenses</IonLabel>
        </IonTabButton>

        <IonTabButton tab="analysis" href="/expense/analysis">
          <IonIcon icon={barChart} />
          <IonLabel>Analyze</IonLabel>
        </IonTabButton>

      </IonTabBar>
    </IonTabs>
  );
};

export default ExpenseTabs;

Sincerely,
Ashish Tripathi

some code would help us provide a solution

Dear aaronksaunders,

Thanks a lot for your reply.

I’ve updated my post by including Explanation and some code.

Let me know if you require anything else.

Sincerely appreciate you efforts.

Regards, Ashish

Hello Aaron, any help on this is highly appreciated.

I know time should be the biggest constraint for you, but I would request you to do the needful.

Sincerely,
Ashish