feat: Make react router work with nested routes

Feature Request

Ionic version:
[x] 5.5.5

Describe the Feature Request
Although explained in the docs, the ionic router for react is majorly broken when using it with nested routes in the most recent ionic version. This is especially the case if it is combined with ionic tabs. For my case, this renders the ionic routing completely useless due to unforeseeable bugs that occur while usage (i.e. pages keep hidden, broken navigation animations, etc.).

Describe Preferred Solution
IonRouterOutlets should be nestle inside each other and one ion router outlet should only control the state of the nested pages. Especially, the nested router outlets need to be aware of them being nested as right now, the z-index changes fail for nested routes. Furthermore, animations should be completely disabled for pages directly nested in a tab view. Right now, there are scenarios in which programmatically changing the route using history.push(), animations could happen even in a tab view. Most of the issue are primarily visible when viewing the page in iOS mode.

Describe Alternatives
I know that is is an extremely broad request but trust me, I tried to narrow it down to actual bug reports but there is just too much broken and too many cases to be considered. I would love to see a working router that is actually usable for projects that are not just demos.
I worked myself through a lot of bug reports regarding this topic on GitHub in the last weeks and until now it always seems that there are only minor fixes but nothing that resolves the underlying issues 🙁

1 possible answer(s) on “feat: Make react router work with nested routes