Ionic React：自从添加Ionic以来，选项卡之间的切换非常慢

问题描述

我刚刚将Ionic添加到我现有的React应用程序中，然后实现了@ ionic / react-router。

但是在修改导航选项卡之后，当我在两个选项卡之间切换时，我注意到延迟的巨大差异：

• 使用ReactRouter 0.5 0.5秒
• 使用IonicReactRouter 2 2秒

（我可以提供视频证明）

我的代码：

<IonTabs>
  <IonRouterOutlet animated={false}>      
    <Redirect exact path="/tab" to="/tab/home" />
    <Route exact path={`/tab/home`} render={() => <Home />} />
    <Route exact path={`/tab/user`} render={() => <User />} />
    <Route exact path={`/tab/ranking`} render={() => <Ranking />} />
    <Route exact path={`/tab/settings`} render={() => <Settings />} />
  </IonRouterOutlet>

<IonTabBar slot="bottom">
  <IonTabButton tab="home" href="/tab/home">
    <IonIcon className='icon icon-home' />
    <IonLabel>Home</IonLabel>
  </IonTabButton>
  <IonTabButton tab="user" href={`/tab/user`}>
    <IonIcon className='icon icon-team' />
    <IonLabel>Club</IonLabel>
  </IonTabButton>
  <IonTabButton tab="ranking" href={`/tab/ranking`}>
    <IonIcon className='icon icon-ribbon' />
    <IonLabel>Phases</IonLabel>
  </IonTabButton>
  <IonTabButton tab="settings" href={`/tab/settings`}>
    <IonIcon className='icon icon-ranking' />
    <IonLabel>Ranking</IonLabel>
  </IonTabButton>
</IonTabBar>

我注意到，如果我从标签中删除所有内容，则“切换时间”还可以，但是我不希望空标签?

<IonRouterOutlet >      
  <Route exact path={`/tab/home`} render={() => <IonPage>Home is empty</IonPage>} />
  ...

我做错了吗？

PS：当然，我可以优化选项卡的内容，但这不能解释为什么它比react browserRouter慢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）