1

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

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

  • 使用 ReactRouter ✅ 0.5 秒</li>
  • 使用 IonicReactRouter 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 慢

4

0 回答 0