bug: react, tab page is unmounted when route is defined in a child component

[mauriceackel]

Bug Report

Ionic version: [ ] 4.x [x] 5.x (5.5.5)

Current behavior: When defining a custom route, which itself renders out the normal react-router Route, the IonRouterOutlet will destroy the page when switching tabs.

https://user-images.githubusercontent.com/20804369/109848348-7198cf80-7c50-11eb-9e0c-3e4eba7d0770.mov

Expected behavior: Returning a route from a custom component should be treated equal to having the route directly placed in the IonRouterOutlet (i.e. the corresponding page would not get destroyed when switching tabs)

Steps to reproduce: Please see the video an the explanations in the code.

Related code: Please find the code to reproduce this issue in the following repo: https://github.com/mauriceackel/react-routing-issue-example/tree/no-direct-child-routes IMPORTANT: Please make sure to use the 'no-direct-child-routes' branch

[mauriceackel]

Quick update, having a custom route works when you extend the Route component as defined in react-router, i.e.

class PrivateRoute extends Route {
  ...
}

So maybe this is not a bug but rather a feature request.

[mauriceackel]

@liamdebeasi There also seem to be more issues regarding this. For example, if I have a few of my routes wrapped in a React context provider, the routing between them is completely broken, i.e.

<IonRouterOutlet>
  <MyContext.Provider value={{ foo: 'bar' }}
    <Route exact path="/page/" component={Page1} />
    <Route exact path="/page/subpage/" component={Page2} />
  </MyContext.Provider>
</IonRouterOutlet>

But maybe this is also a different issue?!