Render ionic tabs inside a page

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

I found the problem

In home.tsx

the route path is incorrect it must be like this

<Route path="/home" render={() => <Redirect to="tab/dashboard" />} exact={true}/>

Remove the “/” then it will render