bug: Routing not working with ionic/react@4.9.0-rc.2

[ebk46]

Bug Report

Ionic version:
[x] ionic/react@4.9.0-rc.2

Current behavior:
Routing either doesn't work, or works with no transition animations depending on implementation.

Expected behavior:
Routes should change the page using a transition animation

Steps to reproduce:
Basic routing doesn't work - see included StackBlitz

Related code:

https://stackblitz.com/edit/ionic-v4-react-rc2-routing

Other information:
If IonRouterOutlet is included, as the docs suggest and as has been working until this update, routing is entirely broken. In the StackBlitz you can see that the new content renders underneath the content that should be replaced but the transition never happens.

If IonRouterOutlet is excluded, routing works but with no transition animation.

Ionic info:

Ionic:

   Ionic CLI       : 5.2.8 (/Users/evan/.config/yarn/global/node_modules/ionic)
   Ionic Framework : @ionic/react 4.9.0-rc.2

Capacitor:

   Capacitor CLI   : 1.2.0
   @capacitor/core : 1.2.0

Utility:

   cordova-res : 0.6.0
   native-run  : not installed

System:

   NodeJS : v12.6.0 (/usr/local/Cellar/node/12.6.0/bin/node)
   npm    : not installed
   OS     : macOS High Sierra

[elylucas]

HI @ebk46,

There are some structural changes to make in RC2. I updated your stackblitz with them: https://stackblitz.com/edit/ionic-v4-react-rc2-routing-gakmsc

The gist is IonPage should now be the root of every component rendered inside of an IonRouterOutlet, and IonPage shouldn't be used outside of that.

More info here: https://github.com/ionic-team/ionic/blob/master/packages/react/CHANGELOG.md

We are working on rolling out the docs to reflect these changes now.

Thanks!

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