当我多次单击选项卡时，后退按钮无法正常工作

Question

我正在使用 ionic react 编写一个移动应用程序，并且几乎完成了。但是我发现了一个这样的错误。在我的 Android 设备上测试应用程序时，我做了这样的事情，这里有问题。

• 我单击主页选项卡并转到主页。然后我又点击了主页标签 3 次。
• 当我按下设备上的返回按钮时，它会将我重定向回主页。

如何解决此错误？找了好久都没找到。

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

从现在开始谢谢你。

Answer 1

最好通过 useHistory 进行导航。这听起来是单页应用程序。也许你的问题会得到解决：

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