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. 
1 post - 1 participant