bug: react, vue pushing child tab pages on different tabs causes browser back button to behave incorrectly

[Suxsem]

Hello guys, I think there is another bug with ionic/vue-router:

You have two (or multiple) tabs with child routes:

• /tabs/cars
• /tabs/cars/mycar
• /tabs/account
• /tabs/account/myprofile

Then I have a button in /tabs/account/myprofile that routes to /tabs/cars/mycar (router.push("/tabs/cars/mycar")), The mycar page is opened and the "cars" tab is highlighted.

Now, if the user click on the "account" tab it returns to the myprofile page (this is correct) BUT if he presses the back button NOTHING happens.

I think that pushing a route from a child route in tabs to another child route in tabs messes the navigation history. Can you take a look please? Thanks!

[Suxsem]

@liamdebeasi it happens in 5.6.3 as well as 5.7.0-dev.202104021913.b0533ff, the difference is that in 5.6.3: when the user finally presses the back button, the URL changed but the view did not in 5.7.0-dev.202104021913.b0533ff: when the user finally presses the back button, neither the URL nor the view changed thank you!

[scryptoking]

Does this problem also occur when you navigate to the cars tab by actually tapping the tab (instead of a router.push())?

[Suxsem]

@bddexter no it doesn't! Anyway I use router.push to navigate to a subroute of the tab, not to the tab itself so this test does not exactly replicate my scenario. Thank you for looking into this!

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

[Suxsem]

dear @liamdebeasi, @bddexter I understand you need a reproducible issue, so I made one.

This is the repository: https://github.com/Suxsem/ionic-router-bug This is a video of the issue: https://youtu.be/PUxgVpgzjv8

This is how I got there:

• PREPRATION: 1) Start a new project with tab template (ionic start ionic-router-bug tabs --type vue) 1a) Update vue and vue-router to the latest version. I used:

      "@ionic/vue": "^5.7.0-dev.202104021913.b0533ff",
      "@ionic/vue-router": "^5.7.0-dev.202104021913.b0533ff",

  2) Create a new View called SubTab1 3) Create a new View called SubTab2 with a button that opens SubTab1 4) Edit the Tab2 view adding a button to open SubTab2 5) Add SubTab1 and SubTab2 to the router:

  const routes: Array<RouteRecordRaw> = [
  {
  path: '/',
  redirect: '/tabs/tab1'
  },
  {
  path: '/tabs/',
  component: Tabs,
  children: [
    {
      path: '',
      redirect: '/tabs/tab1'
    },
    {
      path: 'tab1',
      component: () => import('@/views/Tab1.vue')
    },
    {
      path: 'tab1/subtab1',
      component: () => import('@/views/SubTab1.vue')
    },
    {
      path: 'tab2',
      component: () => import('@/views/Tab2.vue')
    },
    {
      path: 'tab2/subtab2',
      component: () => import('@/views/SubTab2.vue')
    },
    {
      path: 'tab3',
      component: () => import('@/views/Tab3.vue')
    }
  ]
  }
  ]

• REPRODUCTION 1) open the app 2) go to tab2 manually 3) press the button in tab2 to open subtab2 4) press the button in subtab2 to open subtab1 5) manually switch to the second tab, subtab2 is shown (this is correct) 6) now press the browser back button => the url changes but the view doesn't, this is the bug

Please tell me if you need more information, thank you!!

[liamdebeasi]

Thanks, I can reproduce this behavior. It looks like this bug affects both Ionic Vue and Ionic React. The problem is that the pushedByRoute value in the route info for /tabs/tab2/subtab2 is itself /tabs/tab2/subtab2 so it just selects the current view as the view we need to navigate to.

[Suxsem]

it makes sense! hope there is an easy fix for this, please don't hesitate to ask me anything, I would be very happy to help

[Suxsem]

Hello guys, any progress on this? I can still reproduce the issue in 5.6.5... Fingers crossed, thank you!

[liamdebeasi]

No updates at the moment. Any updates will be posted here. If you want to get a sense of what we are working on:

• The Ionic Core Project Board shows what we are working on right now (in progress, in review, merged, etc).
• The milestones also give you an idea of which release a particular commit will be a part of: https://github.com/ionic-team/ionic-framework/milestones.

[Suxsem]

Got it, thank you!

[liamdebeasi]

Hey there,

The team took a fresh look at this, and it appears that things are behaving as expected.

In this scenario, the application is trying to manipulate the Tab 2 stack from within Tab 1.

Each tab is designed to be an individual navigation stack. Items in one stack should never interact with items in another stack. As a result, the usage described in this issue is considered an anti pattern in both Ionic and native mobile application and is not supported.

The iOS App Store app is a great example of correct tabs usage. If you start on the "Today" tab, none of the buttons in that tab will ever redirect you to the "Games" tab or the "Apps" tab. The only way to access either of those tabs is to tap the associated button in the tab bar.

---

As a result of this, we do not recommend having a page in one tab route users to another tab. If you need to route to a common page across multiple tabs we recommend doing one of the following:

1. Open the common page as a modal.
2. Add the common page as a non-tabs page.
3. Add route definitions within each tab that renders the common page component. This allows you to route to the component without ever leaving a particular tab.

I am going to close this. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.