Ionic-react - so many render issues related to routing

[BLACKSHiRTSQUAD]

Well, I did post a specific problem here. I ended up moving my state up to fix the problem.

Inside IonRouterOutlet, setState doesn't cause re-render

StackOverflow link to my question:

I was also struggling with this issue. It was very discouraging to see an Ionic employee directly contradict the documentation and then be dismissive of the problem after realizing his mistake.

Ionic/react - nested routes

I am trying to nest routes at different levels of my React component tree but it seems that wrapping lower-level routes with the component causes them not to render (removing IonRouterOutlet fixes the functionality but I get no Ionic animations). With the code below, clicking the “Page 1” link will update the URL but the page will not actually change. If you change the in Page1Router to a Page 1 will then show when expected, but there is no animation when clicking the “Page A” link, since t…

I was also struggling with this issue. It turns out it was caused by trying to use a Route component within a fragment. I was trying to do code-splitting with my routes, but I guess I have to use just one big file because use fragments breaks it and using multiple IonRouterOutlets breaks it.

Ion-page-invisible class not being removed navigating in between pages [VIDEO]

I had a similar problem since past two days. I was importing all the required components and I couldn’t figure out why this maybe happening. I know it started happening when I changed structure in one of my tabs which also had a child router. I fixed the problem by adding afterEach hook to my router like this: router.afterEach((to, from) => { //.. other code setTimeout(() => { const main = document .getElementById("main-content") .querySelector(".ion-page.ion-page-invisible"…

Then my current bugs are… First, it seems if I trigger multiple re-renders from multiple useEffects loading async data, it causes the transition animation to trigger multiple times. It looks pretty jank.

And then second I wish IonBackButton had more options for manipulating the history stack, because if I use a link to switch between IonPages in IonTabBar, I want the back button to go up a level in the routes for that Tab, not to go back to the previous page.

The documentation around all of these is so unhelpful. Like for IonBackButton it says “It is smart enough to know what to render based on the mode and when to show based on the navigation stack.” Which is fine if it does what I want, but when it’s not working and I’m trying to apply some hack to fix it, I’d love something more clear than “It is smart enough to know” … And all the documentation is like this. I want to know more about what’s happening and better sample code.

I’m sure all of these problems are solvable. I’m sure I could provide a repo to reproduce these issues and after lots of discussion get some fix put in place. But it’s so many bugs, the documentation is often wrong and doesn’t get corrected, implementation details are black boxed but then I need to know them to get my things to work… Honestly I’m just not invested enough in this framework to go through the trouble.

@ptmkenny Okay though. It’s true, I am loving how simple and good looking Ionic is for PWA when it actually works. Most of my bugs are with the routing so it makes sense for me to wait for this update at least… If I have to move everything off Ionic it’s gonna be quite a pain…