IonRouterOutlet - how paths are stacked? wrong highlight on TabBarButton

Hello there,

Quick question, as I unable to find anything related on the docs:

For some context, I have the following IonReactRouter and its IonRouterOutlet

      <IonTabs onIonTabsDidChange={(e) => handleChangeTabs(e)}>
          <Route path="/home/start" component={Start} exact={true} />
          <Route path="/home/sale/edit/:id" component={SaleEditForm} exact={true} />
          <Route  path="/home/sale/view/:id" component={SaleDetail} exact={true} />
          <Route path="/home/sale/all" component={Sale} exact={true} />
          <Route path="/home/profile" component={Profile} exact={true} />
          <IonTabBar slot="bottom">
          <IonTabBar slot="bottom">
          <IonTabButton tab="start" href="/home/start">
            <IonIcon icon={homeOutline} />
          <IonTabButton tab="service_internal" href="/home/service/internal">
            <IonIcon icon={peopleOutline} />
          <IonTabButton tab="sale" href="/home/sale/all">
            <IonIcon icon={pricetagOutline} />
          <IonTabButton tab="service_external" href="/home/service/external">
            <IonIcon icon={trailSignOutline} />
          <IonTabButton tab="profile" href="/home/profile">
            <IonIcon icon={personOutline} />

Whenever I click on the TabBarButton that points to route “/home/sale/all”, it’s icon get highlighted as expected.

However, whenever an action within “/home/profile” redirects the user to “/home/sale/edit/:id”, TabBarButton for route “/home/sale/all” gets highlighted, why?

Thanks a lot

Can you show your IonTabButtons as well? It probably depends on what href you set there.

of course, just updated the main post.

I can’t reproduce it. In my quick test the Profile tab remains selected. How are you “redirecting”?

i have a button that triggers history.push(’/home/sale/edit/0’)