When I click on Tab more than once the back button works incorrectly

Question

I'm coding a mobile app with ionic react and it's almost done. But I found a bug like this. While testing the app on my Android device, I do something like this and there is something wrong here.

• I clicked on the homepage tab and went to the homepage. Then I clicked on the home tab 3 more times.
• When I press the back button on my device, it redirects me back to the home page.

How do I fix this error? I searched a lot but could not find it.

<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>

Thank you from now.

Answer 1

It's better to navigate by useHistory. It sounds single page app. Maybe your problem will be solved:

const history = useHistory(); // import it.
...
      <IonTabButton
        className="tab-button"
        tab="tab1"
      onClick={()=>  history.push("home")}>
        <div className="tab-bar-item feed" />
        <IonLabel>{strings.tabs.feed}</IonLabel>
      </IonTabButton>
//and other buttons as the same way