Clear cached pages inside IonRouterOutlet programmatically

Ionic Framework Ionic React
1

Hi! I need to clear cached pages inside IonRouterOutlet programmatically on logout.
Without clearing the cache, the behavior of the application looks strange.
For example:

  • I launch the application and navigate through several pages changing something on them
  • I log out and go to Login page
  • I log in and navigate through the previous pages again. Changes on the pages remain, as they were taken from the cache.

How can I remove pages from the DOM after logout?

This is the structure of my application:

<IonApp>
  <IonReactRouter>
    <IonTabs>
      <IonRouterOutlet>
        <Route path="/page-1" component={Page1} />
        <Route path="/page-2" component={Page2} />
        ...
      </IonRouterOutlet>

      <IonTabBar slot="bottom">
         ...
      </IonTabBar>
    </IonTabs>
  </IonReactRouter>
</IonApp>
2

I don’t know anything about React, so while you wait for somebody who does to chime in, I’ll say what I would to somebody using Angular, which is that you shouldn’t know, care about, or rely on what DOM elements get cached and when.

Concentrate instead on managing your data layer freshness separately from that of the view layer. Do not rely on view lifecycle events to manage the data they’re presenting. Always expose business objects as Observables, and that way on logout you can push-vaporize any stale data with zero regard for what is or isn’t sitting in the DOM.

3

How are the pages being cached?

I have an Ionic app with the same structure as yours and I don’t have caching issues; if I log out and log in as a new user, I see the new user’s data. Also, if I log back in as the same user, but the user data has changed on my server, then I see the new data.

So somehow your pages are getting cached, but AFAIK Ionic doesn’t do this automatically, so you may have set up some kind of cache that is not getting invalidated properly.

For my caching, I use react-query, and I’ve been very happy with it.

1 Like
4

How are the pages being cached?

As far as I understand from the docs IonRouterOutlet does it:

When navigating between the two pages, the IonRouterOutlet provides the appropriate platform page transition and keeps the state of the previous page intact so that when a user navigates back to the list page, it appears in the same state as when it left

You can see in DevTools how the number of <div> elements inside <ion-router-outlet> increases inside DOM when you navigate between pages and how it decrease when you go back from the current page to the previous.
Also you can check it by such code inside your page:

useEffect(() => {
    console.log('create page');

    return () => {
      console.log('destroy page');
    };
  }, []);

destroy page will not be shown when you will navigate to another page by history.push() or will click on link

1 Like
5

have you tried using useIonViewWillEnter on your pages, useEffect sometimes is unpredictable,my pages would cache until i used useIonViewWillEnter to get data

6

have you tried using useIonViewWillEnter on your pages, useEffect sometimes is unpredictable

useEffect(()=>{}, []) will not fire if page have beed cached and you return back to it. Only useIonViewWillEnter() and useIonViewDidEnter() will fire in such case. (React LifeCycle Methods )

my pages would cache until i used useIonViewWillEnter to get data

As far as I understand useIonViewWillEnter does not affect whether the page will be cached or not