This is the structure of my application:
<IonApp>
<IonReactRouter>
<IonTabs>
<IonRouterOutlet>
<Route path="/page-1" component={Page1} />
<Route path="/page-2" component={Page2} />
...
<Route path="/page-10" component={Page10} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="page-1" href="page-1">
<IonLabel>Page1</IonLabel>
</IonTabButton>
<IonTabButton tab="page-10" href="page-10">
<IonLabel>Page10</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonReactRouter>
</IonApp>
I have a flow where navigation history looks like this:
Page 1 → 2 → 3 → 4 → 5 → 6 → 7
All this navigations go by history.push(). So during this flow all pages remain in the DOM with actual state. I can delete the current page from the DOM by history.goBack() and navigating to the previous page.
But I need to implement the possibility of returning from pages 3 - 7 right to page 2 with clearing of unnecessary pages from the DOM. I didn’t found in react-router-dom ability to remove last pages from history by pathname (like history.goBackToPath('/page-2')), so I implemented similar logic by myself. I count difference between page 2 and the current page and then call history.go(-difference). Unfortunately this solution doesn’t work. When I call history.go(-5) on page 7 for example, it changes route right topage-2 but view changes only one step back to the page 6.
Does anybody know how to resolve this issue?
Packages:
"@ionic-native/core": "^5.34.0",
"@ionic/core": "^5.6.14",
"@ionic/react": "^5.6.11",
"@ionic/react-router": "^5.6.11",
...
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",