I have multiple pages inside the app, but the main page is a page with tabs. I tried to implement this reddit discussion about implementing tabs inside a page but my main page won’t show.
Here is my App.tsx
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route exact path="/home" component={Home}/>
<Route exact path="/search-tenants" component={SearchTenant}/>
<Route path="/" render={() => <Redirect to="/home" />} exact={true}/>
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
And then on the home page (this is my main page)
<IonTabs>
<IonRouterOutlet>
<Route path="/tab/dashboard" component={Dashboard} exact/>
<Route path="/tab/bookings" exact/>
<Route path="/tab/settings" exact/>
<Route path="/home" render={() => <Redirect to="/tab/dashboard" />} exact={true}/>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="dashboard" href="/tab/dashboard">
<IonIcon icon={navigateCircleOutline} />
</IonTabButton>
<IonTabButton tab="bookings" href="/tab/bookings">
<IonIcon icon={calendarClearOutline} />
</IonTabButton>
<IonTabButton tab="settings" href="/tab/settings">
<IonIcon icon={settingsOutline} />
</IonTabButton>
</IonTabBar>
</IonTabs>
My dashboard.tsx component
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 1</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
Tab 1 Content
</IonContent>
</IonPage>
I am debugging it for hours but I cannot identify why it dont have any display