bug: [ionic-react] Route change trigger url change, but doesn't render

Bug Report

Ionic version:

[x] @ionic/react: “^5.0.4”, [x] @ionic/react-router: “^5.0.4”

Current behavior: Despite changing the URL, the view doesn’t rerender. Another error is that I never go to useIonViewDidEnter. I have this in the Home page :

  useIonViewDidEnter(() => {
    console.log('hoooho')
  })

But the log never show up.

Here is a short video of the bug.

Expected behavior: I wish it would change page without any problem.

Steps to reproduce: You can :

git clone https://github.com/florianchevallier/ionic-react-test
cd ionic-react-test
npm i
ionic serve

Click on the “Pokedex” Button on the home page

Related code:

The router : https://github.com/florianchevallier/ionic-react-test/blob/master/src/App.tsx The Home Page : https://github.com/florianchevallier/ionic-react-test/blob/master/src/pages/Home/Home.tsx

Ionic info:

Ionic:

   Ionic CLI       : 6.2.0 (/Users/florianchevallier/.nvm/versions/node/v12.13.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.0.4

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Utility:

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

System:

   NodeJS : v12.13.1 (/Users/florianchevallier/.nvm/versions/node/v12.13.1/bin/node)
   npm    : 6.12.1
   OS     : macOS Catalina

[florianchevallier]

After doing some investigations, replacing the IonRouterOutlet with a Switch from react-router-dom, all seems to work.

[elylucas]

Hi @florianchevallier

Sorry about the delay in taking a look at this.

I checked out your repo, and it seems the issue when using the IonRouterOutlet is that your pages didn’t have a IonPage as their main component. Each page in a outlet needs to have the IonPage as its parent.

Also, there seems to be some duplication of IonContent tags in your pages (some in the page, and some in the layout), there should only be one IonContent per page.

Going to close this as it doesn’t seem as the original issue is a bug in the framework.

For the others on the thread, if the above doesn’t help, please open a new issue and provide a reproduction of the issue in a github repo.

Thanks!