I'm using Ionic with React.
In my app, I've both side menu and the tabs together.
In the tabs only the default tab is working properly other tabs are showing a blank screen.
My code is as follows:
1. App.tsx looks as follows
const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/login" component={Login} exact />
<Route path="/tabs" component={Tabs} exact />
<Route path="/register" component={Register} exact />
<Route exact path="/" render={() => <Redirect to="/login" />} />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
</IonApp>
);
export default App;
In this, the below Route opens a tabbed page
<Route path="/tabs" component={Tabs} exact />
2. Tabs.tsx looks as follows
function Tabs() {
return (
<IonTabs>
<IonRouterOutlet>
<Route path="/tabs/tab1" component={Tab1} exact={true} />
<Route path="/tabs/tab2" component={Tab2} exact={true} />
<Route path="/tabs/tab3" component={Tab3} exact={true}/>
<Route path="/tabs" render={() => <Redirect to="/tabs/tab1" />} exact={true} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="calendar" href="/tabs/tab1">
<IonIcon icon={calendar} />
<IonLabel>Tab1</IonLabel>
</IonTabButton>
<IonTabButton tab="analysis" href="/tabs/tab2">
<IonIcon icon={barChart} />
<IonLabel>Tab2</IonLabel>
</IonTabButton>
<IonTabButton tab="timer" href="/tabs/tab3">
<IonIcon icon={timer} />
<IonLabel>Tab3</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};
export default Tabs;
3. Tab1.tsx looks like this
const Tab1 = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar color="secondary">
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Timesheet</IonTitle>
</IonToolbar>
</IonHeader>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Tab 1</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent class="ion-padding">
Tab 1 Content
</IonContent>
</IonPage>
);
};
export default Tab1;
Other Tabs Tab2.tsx and Tab3.tsx look exactly the same.
