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.

image490×835 28.2 KB

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

4 posts - 2 participants

Read full topic