Keeping state beetween tabs during navigation

Ionic Framework Ionic React
1

Hello guys,
I have started my new Ionic React App.

However, I encounter small problems with navigation.
Indeed, my application uses Tabs navigation, but when I change tabs, the state is not save.

For example, if I load a list of 100 items on my Tab1, and then switch to Tab2, I should reload the list when I return to Tab1.

I did not have this problem on Angular.

Is there a way to keep the state between 2 tabs?

My render part of App.tsx :


 <IonApp>
     <IonReactRouter>
       <IonTabs>
         <IonRouterOutlet>
           <Route path="/tab1" component={Tab1} exact={true} />
           <Route path="/tab2" component={Tab2} exact={true} />
           <Route path="/tab3" component={Tab3} />
           <Route path="/detail/:symbol/:hash/:uuid" component={Detail} />
           <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
         </IonRouterOutlet>
         <IonTabBar slot="bottom" mode="md">
           <IonTabButton tab="tab1" href="/tab1">
             <IonIcon icon={logo} />
             <IonLabel>Tab 1</IonLabel>
           </IonTabButton>
           <IonTabButton tab="Tab2" href="/tab2">
             <IonIcon icon={cashOutline} />
             <IonLabel>Tab2</IonLabel>
           </IonTabButton>
           <IonTabButton tab="tab3" href="/tab3">
             <IonIcon icon={logo} />
             <IonLabel>Tab3</IonLabel>
           </IonTabButton>
         </IonTabBar>
       </IonTabs>
     </IonReactRouter>
   </IonApp>

Thank you in advance !

2

React Hooks use-reducer Example

react hooks use-reducer documentation

React Context Example

React Context Documentation

3

Hey, thanks.

I allready use state managment in my app with redux.

But, but I would have liked to keep the state complete with the position of the screen for example.

4

i am sorry then your question is not clear? If you already keep the state… which is not apparent from the question or the source code, then can you be more specific. Since i don’t see a provider anywhere in this code sample I am confused at how you are really using state/redux

5

I do not put all the code because my client does not want it.
The problem is solved by using redux state managment.

https://redux.js.org/basics/usage-with-react