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

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.

[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.

[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?