Ionic React tab button using wrong URL

Hey guys, so something very strange has been happening to my app recently and I haven’t the slightest clue how it is happening. As described in the description I am using the Ionic React navigation tabs template (was my starting point) from which I’ve built my app. In terms of routing and navigation, I’ve never had any issue as it always been very straight forward but recently after running an npm package audit and update this very quirky bug has appeared and I have no idea how to fix it.

To put in plain words, it seems that Tab1 of my navigation tabs always navigates to the last redirected page. Which looks something like this:

Since this has started I’ve tried a variety of things to fix the issue but none of it has resulted in a fix. To be specific I have found that:

  • Rolled back npm packages to the versions found in the basic templates supplied by ionic did nothing.
  • Re-wrote my routing code did nothing
  • Changing the URL of the tab did nothing
  • App hot reloading (the reload after saving changes in IDE) temporarily fixes the issue, but due to the app data flow, it also breaks the app.
  • This issue persists into compilation (isn’t secluded to just Ionic lab or serve commands.)
  • Using history.push() can change the Tab1 button to inherit such URL until the command changes the URL once again.

Here’s my current routing code:

  <IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/tab1" component={Tab1} />
            <Route path="/tab2/:id?" component={Tab2} />
            <Route path="/tab3" component={Tab3} exact={true} />
            <Route path="/deal/:id/:return?" component={DealPage} />

            <Route path="/login" component={LoginPage} exact={true} />
            <Route path="/signup" component={SignUpPage} exact={true} />

            <Route
              path="/"
              render={() => <Redirect to="/login" />}
              exact={true}
            />
          </IonRouterOutlet>

          <IonTabBar slot="bottom" style={showTabNav ? {} : {display: 'none'}}>
            <IonTabButton tab="tab1" href="/tab1">
              <IonIcon icon={mapOutline} />
              <IonLabel>Explore</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab2" href="/tab2">
              <IonIcon icon={homeOutline} />
              <IonLabel>Deals</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab3" href="/tab3">
              <IonIcon icon={walletOutline} />
              <IonLabel>Wallet</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonApp>

As you can see nothing is out of the ordinary, In fact this code hasn’t been touched in at least two months which makes this issue even more shocking. I believe it could be a package error but seeing as I have rolled back package versions I am beside myself to what the cause of this issue is.

I reproduced the issue. See here: