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

        <Route exact path="/home" component={Home}/>
        <Route exact path="/search-tenants" component={SearchTenant}/>
        <Route path="/" render={() => <Redirect to="/home" />} exact={true}/>

And then on the home page (this is my main page)

        <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}/>
      <IonTabBar slot="bottom">
        <IonTabButton tab="dashboard" href="/tab/dashboard">
          <IonIcon icon={navigateCircleOutline} />
        <IonTabButton tab="bookings" href="/tab/bookings">
          <IonIcon icon={calendarClearOutline} />
        <IonTabButton tab="settings" href="/tab/settings">
          <IonIcon icon={settingsOutline} />

My dashboard.tsx component

          <IonTitle>Tab 1</IonTitle>
        Tab 1 Content

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