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
-
DashboardTabs
It has Tab Buttons for Timesheet and Expense
-
TimesheetTabs
It has Tabs for Dashboard, and Few Other Tabs related to this module
-
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
