bug: Swipe back gesture breaks with Ionic React Router on certain parameterized route changes

[aeharding]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

With Ionic React Router, swipe back gesture breaks when navigating in certain use cases between parameterized routes.

Expected Behavior

Swipe back gesture works.

Steps to Reproduce

Reproduction A

Assumed Ionic React Router app routes

Assume app with two routes in the router:

• /foo/:user
• /baz

Repro

1. Navigate /foo/alex
2. Navigate /baz
3. Navigate /foo/sean
4. Swipe back once (successful)
5. Try to swipe back again, observe it is not possible (you need to hit the back button of the browser or in the header)

https://github.com/aeharding/ionic-27900-a

Reproduction B

Assumed Ionic React Router app routes

• /:name
• /:name/details

Repro

1. Go to /one
2. Replace route with /two
3. Go to /two/details
4. Observe swipe back is broken

https://github.com/aeharding/ionic-27900-b

Code Reproduction URL

No response

Ionic Info

N/A

Additional Information

This issue has been created from #26524 (see comments https://github.com/ionic-team/ionic-framework/issues/26524#issuecomment-1629445149 and https://github.com/ionic-team/ionic-framework/issues/26524#issuecomment-1658459383)

[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.

[aeharding]

Reproductions added!

[thetaPC]

Thank you for reporting the issue! I was able to reproduce the bug on both reproductions.

[nicolae536]

We also experience this issue 🤔 @thetaPC when will the fix arrive ?

[thetaPC]

The team is looking into the issue. Once a fix is implemented, then an update will be given here. I would recommend subscribing to the PR. Thank you!

[mhryshkin]

aeharding I'm not sure if the weird behavior of the swipe back is related to this issue, but I couldn't find anything more applicable. Here's the code I'm working with:

<IonRouterOutlet>
    <Route path="/app" render={() => <AppTabs />} />
    <Route
        exact
        path="/nested/:id"
        render={() => ...}
    />
</IonRouterOutlet>

The AppTabs component contains IonTabs with another IonRouterOutlet. The problem I'm facing is that on the first load of the app, if the content of the tab performs router.push('/nested/anyId'), the back swipe of the nested page doesn't work. Interestingly, if I click on the IonBackButton in the header and then try to repeat the process, the back swipe does work for some reason.

[cuvant]

Hi there, I wanted to ask if there are any updates on this side. I was able to reproduce this behavior within one of our apps.

Using IonBackButton all works as expected but the swipe gesture breaks the whole flow.

[pjlsergeant]

Is it possible to disable the swipe gesture? I have users complaining about this bug, and it doesn't look like a fix is imminent

[Roberto4091]

@pjlsergeant Hi! when configure the app in md mode the swipe gesture is disable setupIonicReact({ mode: 'md' });