Can't get routing to work consistently

Ionic Framework Ionic React
1

All,

I’m having a routing problem that has been driving me crazy for two weeks.

I’m running Ionic 7 with React, but this happened with v6 as well. I’m also using React-Hook-Form for form management, but this problem happened without it.

What happens is that if you perform certain actions repeatedly, after a short while the url gets out-of-sync with what’s displayed on the page. A refresh of the page will display the correct content.

Googling has suggested that I need to make IonRouterOutlet a parent of my Route components, which are direct parents of IonPage components, which I’ve done.

I’ve removed all unnecessary complexity from my app and created this: https://react-ts-e6w3js.stackblitz.io/

To reproduce:

  • Click Provider Search
  • Pick any filter option(s)
  • Click Match Me
  • From the Providers page, click on any person to view the detail page.
  • So at this point, the navigation stack should be:
    • Home
    • Search Filters
    • Providers list
    • Provider detail
  • Press the browser back button. I seem to get different results each time. Rarely it might go back one screen, but usually it goes back two or three. Pressing back/forward repeatedly gets completely mixed up, with the browser URL not matching what’s being displayed by Ionic/React.

Source Code: React Ts (forked) - StackBlitz

I’m going crazy here trying to figure this out! Any help would be greatly appreciated, and I thank you in advance. :slight_smile:

2

are you building a mobile application? If so… why are you using the browser’s back button??

if you are not building a mobile app, then I suggest you remove ion-router and try react-router and see what behavior you get

3

Good point, I’ll try that! Well the client hasn’t yet decided if they wanted this is a mobile website, or if they want it packaged on the app stores. So for now it’s just a mobile website. I’ll give that a shot and report back here. Thank you!

4

That worked perfectly! This is great. I’ll use React Router during dev. Then when the client is ready to package the apps I can switch back to the Ionic Router. Thanks @aaronksaunders!

1 Like