Remove multiple pages from the history

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

1 post - 1 participant

Read full topic