Clear history stack navigation with tabs

Ionic Framework Ionic React
1

I have navigation with tabs:

    <IonTabs>
      <IonRouterOutlet animated={false}>
        <Route exact path="/main">
          <Redirect to="/main/catalog" />
        </Route>
        <Route path="/main/user" component={UserPage} />
        <Route path="/main/cart" component={CartPage} />
        <Route exact path="/main/catalog" component={CatalogPage} />
        <Route exact path="/main/catalog/product/:productId" component={ProductPage} />
        <Route exact path="/main/catalog/constructor" component={ConstructorPage} />
      </IonRouterOutlet>

      <IonTabBar
        onIonTabsDidChange={handleTabChanged}
        slot="bottom"
      >
        <IonTabButton class="no-ripple" tab="user" href="/main/user">
          <IonIcon src={UserIcon} size="large" />
        </IonTabButton>
        <IonTabButton
          tab="catalog"
          href="/main/catalog"
        >
          <IonIcon src={BrandIcon} size="large" />
        </IonTabButton>
        <IonTabButton className="cart-tab" class="no-ripple" tab="cart" href="/main/cart">
          <IonIcon src={CartIcon} size="large" />
        </IonTabButton>
      </IonTabBar>
    </IonTabs>

I click in central tab with path /main/catalog, after i go to page /main/catalog/constructor, in constructor I add the item to the cart and do router.push(‘/main/cart’).
And after that when i click on central tab i show again /main/catalog/constructor because it path save in stack history nav. But i need to show /main/catalog.
What solution can suit me in this situation?

2

Consider using IonTabs’ tabBar property to manage tab navigation. You might need to manually handle the state of the history stack, or use history.replace() when navigating to ensure the correct tab view.