bug: ionic react hardware back button does not go back to correct tab

[berat]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

I made a mobile application with ionic5 as react and simply used tabs. I accidentally pressed the tab I was in at that moment 2 times and when I click the Hardware back button on my Android phone, it redirected it to that tab again.

Expected behavior:

Shouldn't it don't be kept in memory when I click that tab again while in the tab I am in? Or when I click on that tab, I shouldn't do any redirection. How many times I click on that tab, I want to go to the tab I am in before that tab.

Steps to reproduce:

I can't provide an example, but we can think like this.

There are 3 tabs: Homepage, Search and Profile. First, I click on the search tab while on the homepage and go to that page. While on the search page, I click the search tab 1 or more times. When I press the back button on my Android phone, it redirects me back to the Search page.

Related code: I use a structure like this.

<IonReactRouter>
  <IonTabs>
    <IonRouterOutlet>
      <Route path="/" render={() => <Redirect to="/home" />} exact/>
      <Route path="/search" component={SearchScreen} exact />
      <Route path="/profile" exact component={ProfileScreen} />
    </IonRouterOutlet>
    <IonTabBar className="tab-bar-box" slot="bottom">
      <IonTabButton
        className="tab-button"
        tab="tab1"
        href="/home">
        <div className="tab-bar-item feed" />
        <IonLabel>{strings.tabs.feed}</IonLabel>
      </IonTabButton>
      <IonTabButton
        className="tab-button"
        tab="tab4"
        href="/search">
        <div className="tab-bar-item search" />
        <IonLabel>{strings.tabs.search}</IonLabel>
      </IonTabButton>
      <IonTabButton
        className="tab-button"
        tab="tab5"
        href="/profile">
        <div className="tab-bar-item profile" />
        <IonLabel>{strings.tabs.profile}</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>
</IonReactRouter>

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.11.10 (/Users/root/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.1.1

Capacitor:

   Capacitor CLI   : 1.5.2
   @capacitor/core : 1.3.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.12.0 (/usr/local/Cellar/node/14.12.0/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina

[berat]

There is no solution to this bug? @liamdebeasi

[liamdebeasi]

Can you reproduce this issue in a blank Ionic starter application? Code snippets are not usually enough for us to reproduce the issue.

[berat]

It worked very strangely. But how come this problem? I am sure I have taken any action to create this

[liamdebeasi]

Without being able to reproduce the issue myself, I do not know. Can you reproduce this issue in an Ionic starter app and provide the link to the repo?

[berat]

https://codesandbox.io/s/github/aaronksaunders/ionic-react-tabs-tut

I found something like this on the internet. The problem here is when we enter the application on the android phone and press the back button of the device when we click on the same tab, the loop continues over the same tab.

[liamdebeasi]

Apologies for the delay. Can you please provide some steps to reproduce the issue? I am not able to reproduce the issue in the CodeSandbox provided.

[berat]

Sorry for the delay, @liamdebeasi ! I've created a sample application and I'm sending it to you. https://codesandbox.io/s/youthful-shirley-69wub?file=/src/index.jsx

It will probably work correctly when you check it in the browser. But when you try it on your mobile device as apk, it will be wrong. Namely.

pageThree> pageTwo> pageThree will go to pageOne if you press the back button of the device after following these paths. When he presses the back button again, it performs a refresh on that page.

[liamdebeasi]

Thanks! Any chance you could just send this as a GitHub repo? For some reason the CodeSandbox is not loading (I get a blank screen).

[berat]

@liamdebeasi Yeah, sure! You can reach on here https://github.com/berat/ionic-tab-examples

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. You have a few issues with your routing setup that are contributing to the issue:

1. You had a typo in your PageOne route. It should be /PageOne not /pageOne.
2. Your initial route configuration was wrong. You had the following:

<Route path={"/PageOne"} component={App} />
 <Route>
  <Redirect to={"/PageOne"} />
</Route>

An alternative configuration could be:

<Route path="/" component={App} />

That being said, your route structure is a bit confusing. I would recommend putting all tabs under a /tabs path. Right now, you have all non-tabs and all tabs pages under the same root path which can lead to issues.

Your main routing config would look something like the following:

<Route path="/tabs" component={App} />
<Redirect path="/" to="/tabs" />

Your tabs routing config would then look something like the following:

<Route path="/tabs" render={() => <Redirect to="/tabs/PageOne" />} exact />
<Route path="/tabs/PageOne" component={PageOne} exact />
<Route path="/tabs/PageTwo" component={PageTwo} exact />
<Route path="/tabs/PageThree" component={PageThree} exact />
<Redirect exact from="/signIn" to="/companyfeed" />

3. This is not causing this particular issue, but we do recommend placing an IonRouterOutlet at the root and using IonReactRouter. Right now, you use the regular Router instance and only render an IonRouterOutlet under the /out path.

[berat]

@liamdebeasi Yes, I noticed the typo later. But after fixing these errors, I still encounter the same problem while trying on my mobile phone.

[liamdebeasi]

Thanks, I can reproduce this behavior in an Ionic React tabs starter app as well. I must have been reproducing a different issue.

[berat]

I'll try to send you a video during the day.

[liamdebeasi]

Thanks! You don't need to if you don't want to -- I can reproduce the issue that you are describing on my end.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22559, and a fix will be available in an upcoming release of Ionic Framework.

[berat]

Hey @liamdebeasi , I just upgrade ionic/react (5.5.2) package and I got this error : TypeError: props.onSetCurrentTab is not a function

Codes are again the same as above

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.