IonRouterOutlet - how paths are stacked? wrong highlight on TabBarButton

Ionic Framework
1

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

   <IonReactRouter>
      <IonTabs onIonTabsDidChange={(e) => handleChangeTabs(e)}>
        <IonRouterOutlet>
          <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} />
        </IonRouterOutlet>
          <IonTabBar slot="bottom">
          <IonTabBar slot="bottom">
          <IonTabButton tab="start" href="/home/start">
            <IonIcon icon={homeOutline} />
            <IonLabel>Início</IonLabel>
          </IonTabButton>
          <IonTabButton tab="service_internal" href="/home/service/internal">
            <IonIcon icon={peopleOutline} />
            <IonLabel>People</IonLabel>
          </IonTabButton>
          <IonTabButton tab="sale" href="/home/sale/all">
            <IonIcon icon={pricetagOutline} />
            <IonLabel>Sales</IonLabel>
          </IonTabButton>
          <IonTabButton tab="service_external" href="/home/service/external">
            <IonIcon icon={trailSignOutline} />
            <IonLabel>Signs</IonLabel>
          </IonTabButton>
          <IonTabButton tab="profile" href="/home/profile">
            <IonIcon icon={personOutline} />
            <IonLabel>Profile</IonLabel>
          </IonTabButton>
        </IonTabBar>
         </IonTabBar>
      </IonTabs>
    </IonReactRouter>

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

2

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

3

of course, just updated the main post.

4

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

5

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