bug: Navigation between pages from different nested IonRouterOutlet's breaks UI due to outlets overlap

Bug Report

Ionic version:

[x] 4.11.8 (latest)

Current behavior: When trying to navigate between two pages from different IonRouterOutlets UI is flickering and breaks, as non active outlet is on the top of others, making all visible UI elements unreachable.

Expected behavior: Navigation between two pages from different nested IonRouterOutlet’s should be possible. Router outlets shouldn’t overlap each other, correctly determining which of them is active now (on the top of others).

Steps to reproduce:

Basically, what I’m trying to do is navigation between two pages Home (/home) and List (/list), both of them are inside global IonRouterOutlet, and both have inner IonRouterOutet for their own nested routes, as described in Docs. And here is a deal: I want to navigate directly from nested route of Home (e.g. /home/welcome) to the nested route of the List (e.g. /list/:id) with correct page transition. And it even works… but only for the first time. Then there are 3 different outlets in DOM overlapping each other, two with z-index: 0 (one of them is needed), and another (incorrect) with z-index:101, so UI is blocked with transparent alien outlet.

Related code:

https://gist.github.com/alekseykarpenko/6e5c71f915cf53eeee896e24ab1ee562/7af928cff5ee6a6553d4fa899d22f5874cc9cb42

Other information:

❗️ Looks like this is strictly related to #18197, #18823, #18845 (all of those Angular issues have been opened since last summer). The quick workaround for me here was moving List’s nested routes into parent IonRouterOutlet:

<IonApp>
  <IonReactRouter>
      <IonRouterOutlet>
        {/*<Route path="/list" component={ListPage}/>*/}
        <Route path="/list" component={List} exact={true}/>
        <Route path="/list/:id" component={Item}/>
        <Route path="/home" component={HomePage}/>
        <Route path="/" render={() => <Redirect to="/home"/> } exact={true} />
      </IonRouterOutlet>
  </IonReactRouter>
</IonApp>

https://gist.github.com/alekseykarpenko/6e5c71f915cf53eeee896e24ab1ee562/7af928cff5ee6a6553d4fa899d22f5874cc9cb42

But that’s not a real gold bullet, I want it back 😢 Actually, I have two reasons for that: 1) Use all power of React Router nested routes; and 2) Place Home inside Tabs View while List will not be there and add Side Menu to both of them within the global IonRouterOutlet.

Thoughts on fixing this Even while both pages are in different nested outlets, they have same global outlet. Looks like navigation goes in right way, but outlet controller can’t determine current active outlet, giving incorrect z-index.

Ionic info:

Ionic:

   Ionic CLI       : 5.4.11 (/Users/ak/.nvm/versions/node/v10.16.3/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 4.11.8

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.3 (/Users/ak/.nvm/versions/node/v10.16.3/bin/node)
   npm    : 6.9.0
   OS     : macOS Catalina

Best regards and thanks for all that you do 💪 Keep em going.

[mauriceackel]

Hello @elylucas, is there any way to confirm that this solution is still working in ionic 5.5.4 with react router 5.2.0? I am using the following setup of my app:

    <IonApp>
      <IonReactRouter>
        <Switch>
          <Route path="/administration/" component={Administration} />
          
          <IonTabs>
            <IonRouterOutlet>
              <Route path="/list/" component={List} />
              <Route path="/account/" component={Account} />
              <Route path="/checkin/" component={CheckIn} exact />

              <Redirect from="/" to="/list/" exact />
            </IonRouterOutlet>

            <IonTabBar slot="bottom">
              <IonTabButton tab="list" href="/list/">
                <IonLabel>List</IonLabel>
              </IonTabButton>
              <IonTabButton tab="account" href="/account/">
                <IonLabel>Account</IonLabel>
              </IonTabButton>
              <IonTabButton tab="checkin" href="/checkin/">
                <IonLabel>Checkin</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </Switch>
      </IonReactRouter>
    </IonApp>

And inside my Account component I export the following:

function AccountRouter({ match }: RouteComponentProps): ReactElement {
  return (
    <IonRouterOutlet ionPage>
      <Route exact path={match.path} component={Account} />
      <Route path={`${match.path}details/`} component={Details} />
      <Route path={`${match.path}credentials/`}  component={Credentials} />
    </IonRouterOutlet>
  );
}

So I am basically using the setup as explained in the docs together with your fix proposed here. However, if I navigate to the subpage Details inside this nested Ion router outlet an back again, the following happens:

https://user-images.githubusercontent.com/20804369/109241704-168f5480-77da-11eb-9669-d1c4bd0018ec.mov

I think there is also another issue. See as the ion-router outlet gets assigned the ion-page-invisible class here for a brief moment. I don’t know why this would need to be set on the router outlet here. I have the suspicion that this is can also cause issues with re-rendering of images because in another component of mine, all images get rerendered if I do a page transition backwards.

https://user-images.githubusercontent.com/20804369/109242151-d8defb80-77da-11eb-8f2e-313729b82d17.mov

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.