Ion-Router Not Firing Load/Update Events or Rerendering Stacked Component

[aa-telali]

Ionic version:

[x] 4.x (4.3.1)

I'm submitting a ...

[x] bug report [ ] feature request

Current behavior: When I browse to a page that has previously been loaded, the load/update events are not firing, nor is the component being re-rendered.

When I use an ion-button, the ion-router's push method or even the back button a previously loaded component/page is loaded from the navigation stack by the looks of it but no events are fired and the page displays out of date data (so it's not been re-rendered).

Expected behavior: All the usual events should be fired when a page is loaded or reloaded upon a URL change because data could have changed in the mean time.

I have checked the docs as well as open and closed issues on the repository. This is a Stencil PWA but relates to the ion-router. I think it's to do with the ion-nav stack of pages because the previous page doesn't seem to get Unloaded.

Steps to reproduce: Very basic steps. Create a new PWA using the npm stencil init command and select the PWA template which includes Ionic.

Add the following methods to both Home and Profile pages and check the console output on running the app (on the Profile page replace the word HOME with PROFILE).

componentWillLoad() {
  console.log('HOME: Component Will Load');
}
componentWillUpdate() {
  console.log('HOME: Component Will Update');
}
componentDidLoad() {
  console.log('HOME: Component Did Load');
}
componentDidUpdate() {
  console.log('HOME: Component Did Update');
}
componentDidUnload() {
  console.log('HOME: Component Did Unload');
}

If you wish you can add the following button to the Profile page too: <ion-button href="/" expand="block">Home page</ion-button>

Other information: There are other issues reported relating to Angular based routing as well. This may or may not be related if both forms share the same ion-nav component.

I think it's related to the ion-nav component because the Unload event is not fired when going to the profile page but it is fired when moving to the Home page (using any type of routing change, Push method, Ion-Button or Ion-Back-Button)

I copied the button from the Home page to the Profile page and changed the href and description. It exhibited the issue. (No Unload on Home and no other events when going back to Home. The Profile page shows all events firing as expected.)

Ionic info: Going from Home to Profile, back to Home and then Profile a few times gives the following output in the console:

Start App >

HOME: Component Will Load
HOME: Component Did Load

Click Profile button >

PROFILE: Component Will Load
PROFILE: Component Did Load

Click Home button (or Back button) >

PROFILE: Component Did Unload

Click Profile button >

PROFILE: Component Will Load
PROFILE: Component Did Load

Click Home button (or Back button) >

PROFILE: Component Did Unload

So the Profile Unload is called upon navigation to Home, even when using the standard ion-button with a href of /. Which means that the Will-Load and Did-Load events fire on each visit to Profile. But the same does not happen for Home.

My actual app also exhibits this behaviour from multiple pages down the stack so it doesn't seem to be related to just the / route.

I've updated to the latest versions of both Ionic and Stencil and it shows the same issue.

[Yannick-DG]

I've got the same issue. When you navigate to a page that loads data and then log out from that page, sign in with another account and go back there, you'll notice the same data as the old user. It should reload instead of showing old data.

[aa-telali]

Looks like the bot's auto-ignoring this one :(

I think this is definitely an Ionic Navigator issue instead of something wrong in Stencil. Surely this would affect Vue and React too?

[aa-telali]

In case this helps anyone, I've now upgraded the project to Stencil One (and the corresponding Ionic version 'one') but moved to using nav.setRoot() instead of router.push(). This now loads each screen as root and doesn't cache the previous screens so fixes the issue.

But this creates other issues we'll have to solve, like moving between pages requires web access because bundles get loaded as required (due to the move to 1.0) - I might look to configure it to bundle a few of these pages together so it doesn't need new downloads when moving between them... I'm sure I read something about that somewhere! (If you know please post a link, thanks.)

Also worth noting is that using nav.setRoot() with ion-router doesn't handle parameters/componentProps yet, so the url never shows any of the parameters so I've removed ion-router for now.

[hhsm95]

I have a similar issue with Ionic React, useEffect and Hooks. My app has a hook useState in the App Component (the root of all), in this component I have the Routes, and I use Route render to pass properties (the hook of my common state) and its shows fine in the children component called with the Route. But when I update the hook state with the passed hook, it update the original state in App Component (the root one) but It wont re-render the children component accesed by the Route. I already tested this in simple React with ReactRouterDom without Ionic and its works without any problem, so I think the problem is in IonReactRouter (generally the routing system that Ionic implements). Any help is apreciated, thanks.

[vance]

REALLY frustrating

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!