bug: vue and react routing integrations always pop when forward button is pressed

[uwwangxiangyu]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

If I press back button and press forward button the url is correct but the page is wrong

Expected behavior:

it should display correct page

Steps to reproduce:

Related code:

App component

const App: React.FC = () => (
    <IonApp>
        <IonReactRouter>
            <IonRouterOutlet>
                <Route exact path='/pageone' component={PageOne}/>
                <Route exact path='/pagetwo' component={PageTwo}/>
                <Route exact path='/pagethree' component={PageThree}/>
                <Route exact path='/pagefour' component={PageFour}/>
                <Redirect exact from={'/'} to={'/pageone'}/>
            </IonRouterOutlet>
        </IonReactRouter>
    </IonApp>
);

PageOne component

const PageOne = ({ history }) => {
  return (
    <IonPage>
      <IonContent fullscreen>
        <p>This is Page One!</p>
        <IonButton onClick={() => history.push('/pagetwo')}>
          Go to page two
        </IonButton>
      </IonContent>
    </IonPage>
  )
}

PageTwo component

const PageTwo = ({ history }) => {
  return (
    <IonPage>
      <IonContent fullscreen>
        <p>This is Page Two!</p>
        <IonButton onClick={() => history.push('/pagethree')}>
          Go to page three
        </IonButton>
      </IonContent>
    </IonPage>
  )
}

Other information:

Example:

https://www.loom.com/share/048952f5848f443a8e108f52906e0ba4

Question:

1. Based on the Ionic component doc, we need to use href in IonButton in order to go to a page which does not render page transition animation (I assume it just updates the location.href). But I can also use routerLink to go to a page with page transition. Which is recommended?

[liamdebeasi]

Thanks for the issue. Can you reproduce this in an Ionic starter app and provide a link to the repo?

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[uwwangxiangyu]

Thanks for the issue. Can you reproduce this in an Ionic starter app and provide a link to the repo?

https://github.com/uwwangxiangyu/ionic-routing-issue

[liamdebeasi]

Thanks for the follow up. Can you please provide some steps to reproduce the issue? I cannot reproduce this issue on my end.

[uwwangxiangyu]

Thanks for the follow up. Can you please provide some steps to reproduce the issue? I cannot reproduce this issue on my end.

1. Go to root ip
2. Press button to page2
3. Press button to page3
4. Press button to page4
5. Press back button of the browser
6. Press forward button of the browser

On my end I can see the url is correct but the page is wrong https://www.loom.com/share/048952f5848f443a8e108f52906e0ba4?t=0

[liamdebeasi]

Thanks. The problem here seems to be that when the forward button is pressed in the browser, the onpopstate event is fired even though we want to push a page not pop it. I need to do some digging to see if there's any way we can account for this.

[liamdebeasi]

This also impacts Ionic Vue ~and probably impacts Ionic Angular~. One idea as to how we could fix this is to compare the location that the router has directed us to with the pathname of the previous item in our locationHistory stack. If the current path does not equal the previous path, then this we actually want to push an item to the stack.

Some pseudo code:

handleHistoryChange(location, action) {
  ...
  let realAction = action;
  if (action === 'pop') {
    const previous = locationHistory.previous(); 
    const current = locationHistory.current();

    // If path we are on does not equal the previous
    // location item's path, then we might not actually
    // want to pop off the stack.
    if (location.path !== previous.pathname) {
      realAction = 'push';
    }
  }
}

Not sure how this would work in practice, but I can test it out.

[srstanic]

Not sure how this would work in practice, but I can test it out.

@liamdebeasi I see you've already looked into this issue. What did you find? What are the outlooks for this issue?

[srstanic]

@liamdebeasi are there any updates or comments on this issue?

[liamdebeasi]

I don't have any updates on the issue. Someone from the team will post here when we do.

[legendar]

@liamdebeasi Is there any known workaround for this issue?

[stasdre]

@liamdebeasi Are there any solutions to this problem? In ionic react v6 the same problem occurs. Is this fixed in ionic version 7?

[liamdebeasi]

@stasdre I don't work for Ionic anymore, so I am not aware of any solutions to the problem. However, if this issue is still open then that means it has not been fixed yet, so it is likely still a problem in Ionic v7+.