I just added Ionic to my existing React app and, then, impleted the @ionic/react-router.
But after to modify my navigation tabs, I notice a BIG difference of delay when I switch between two tabs :
- 0.5 seconds with ReactRouter
- 2 seconds with IonicReactRouter
<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>
I notice, if I remove all content from my tabs, the “switch time” is Ok, but I don’t want empty tabs
<IonRouterOutlet >
<Route exact path={`/tab/home`} render={() => <IonPage>Home is empty</IonPage>} />
...
Do I made a mistake ?
PS : Of course I can optimize my tab content, but this is not explains why it is more slow than the react BrowserRouter