bug: Parent outlet flickers when using nested router outlet

[sean-perkins]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When using nested router outlets, the non-active outlet can flicker and render before the desired outlet is mounted.

For example with:

<IonApp>
    <IonReactRouter>
      <Route path="/" component={Main} />
      <Route path="/overlay-hooks" component={OverlayHooks} />
      <Route path="/overlay-components" component={OverlayComponents} />
      <Route path="/tabs" component={Tabs} />
    </IonReactRouter>
  </IonApp>

When navigating directly to /tabs, Main will render for a brief moment and flicker before the Tabs component with it's own router outlet is rendered.

Kapture.2022-01-26.at.19.45.15.mp4

This is a separate issue from the flickering issue when navigating between tabs.

Expected Behavior

When navigating directly to /tabs, the Main component route should never display. The Tabs component should render without a flicker.

Steps to Reproduce

Outlined above.

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

[ionitron-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.