-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: Nested IonRouterOutlet prevents component unmount #20597
Comments
Hi, any news of this? |
All of these issue links show the same problem that I am having trouble with. I replaced IonRouterOutlet with Switch, but IonTabs requires IonRouterOutlet, and I must delete IonTabs, and the app looks like ugly. |
Anybody? This is a huge blocker for me |
For me too... So far the workaround we use is to force a complete page reload ( |
No, God, please, no :) Try this #20707 (comment) |
It doesn't work for us. Staying with |
Did you try Ionic lifecycle methods? |
I just did. None of the 4 events in https://ionicframework.com/docs/react/lifecycle was fired. |
I'm also experiencing the same issue, no lifecyle method will be fired. Tried both class and functional component using the ionic docs. |
Hello all, I'm looking into this now, hope to have something to report on soon. |
Hi All, We have a dev release that provides better support for nested IonRouterOutlet components. There is a new prop on IonRouterOutlet that lets the router know it is a nested outlet to better perform the transition. If your'e outlet is a nested outlet directly rendered by a Route in a parent outlet, then use the App.tsx:
Sub1Outlet.tsx:
Sub2Outlet.tsx:
If you can, could you try to install it and let us know if it fixes the issue and if you run into any others? To install it run:
If all goes good this should be available in the next Ionic release. Thanks! |
It didn't unmount the component for me. For now I will stick with |
@elylucas thanks for the fix! I'm noticing that going "back" from nested routes seems to have no transition animation when going back from a "level-3" nested route to a "level-2" nested route. |
I first noticed this issue with a single layer of routes (no nesting) and an apollo query with the All that to say i think the not unmounting components on |
What did you apply routerDirection="back" on? |
Hello @basicBrogrammer, I started working on a react app, currently it does not deviate much from the default one generated by ionic start with a side menu. It does not have nested routing. I could work it around by replacing IonRouterOutlet with a Switch, and wrapping it an IonContent to give it an id, but I can not judge what kind of side effects it would have. I think that the existing apis should give the developer control on when the component under a route is persisted or not, once the user leaves the route. I think this is similar to what you described on #20597 (comment), if I understood it well. |
This seemed like a promising take but it didn't work for me. I assume it's because I have the |
I think if you replace IonRouterOutlet with a switch you won't get the ION transition animations. You can change the direction on the given route to "back" and it will reload .... or at least it did last time i played with it. |
I added routerDirection back to any link going to the given route that i wanted to "remount" |
what is the state on this issue? |
You have to remember that replacing IonRouterOutlet with a Switch will mean converting all your useIonViewDidEnter with useEffects and lose animations. |
Is there any new news? |
I found a workaround. You can set an This is to force unmount the page, and because this page is no longer on the DOM it cannot execute its life cycles. This is my helper function
This is my page
This is my custom header
Hope this helps |
This is a huge blocker for me. |
Any updates? |
It seems to me that Ionic just don't deal with these issues. |
In case of Vue framework, adding key attribute to "ion-router-outlet" resolved it for me
|
I found a workaround. I'm just using the React router feature to go to another page.
That code triggers an unmounted event. I hope this workaround is helpful to you. |
Stumbled across this issue today, found that links and ion items accept a |
Bug Report
Ionic version:
5.0.1
Here is a repo with a minimal code to reproduce the bug:
https://github.com/OoDeLally/ionic-nested-router-outlet-bug
Ionic info:
The text was updated successfully, but these errors were encountered: