Remove multiple pages from the history

This is the structure of my application:

        <Route path="/page-1" component={Page1} />
        <Route path="/page-2" component={Page2} />
        <Route path="/page-10" component={Page10} />

      <IonTabBar slot="bottom">
        <IonTabButton tab="page-1" href="page-1">

        <IonTabButton tab="page-10" href="page-10">

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?


    "@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",

There is a bug in Ionic
bug: react, router.go does not show correct view when n < -1