Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: angular/react/vue, cannot set query param on tab buttons #25470

Open
4 of 7 tasks
gooddaddy opened this issue Jun 15, 2022 · 2 comments
Open
4 of 7 tasks

bug: angular/react/vue, cannot set query param on tab buttons #25470

gooddaddy opened this issue Jun 15, 2022 · 2 comments
Labels
package: angular @ionic/angular package package: react @ionic/react package package: vue @ionic/vue package type: bug a confirmed bug report

Comments

@gooddaddy
Copy link

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x
  • Nightly

Current Behavior

<IonTabButton
              key={item.tab}
              tab={item.tab}
              href='/a?search=1'
              className={styles.tabButton}
            >
              <NavIcon selected={!!selected} icon={item} />
              <IonLabel>{item.label}</IonLabel>
            </IonTabButton>

'search will not be in location's href

Expected Behavior

'search' will be in location's href

Steps to Reproduce

<IonTabs>
      <IonRouterOutlet id="tabs">   
       <Route  exact={exact} path='/a' render={() => <UComponent />} />
     </IonRouterOutlet>
        <IonTabButton
              key={item.tab}
              tab={item.tab}
              href='/a?search=1'
              className={styles.tabButton}
            >
              <NavIcon selected={!!selected} icon={item} />
              <IonLabel>{item.label}</IonLabel>
    </IonTabButton>
   </IonTabBar>
</IonTabs>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.19.1

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v16.14.2
npm : 8.5.0
OS : macOS Big Sur

Additional Information

企业微信截图_638f61fc-855c-44eb-85bb-781e00e76479

@ionitron-bot ionitron-bot bot added the triage label Jun 15, 2022
@liamdebeasi liamdebeasi self-assigned this Jun 16, 2022
@liamdebeasi
Copy link
Contributor

Thanks for the issue. Can you please provide your use case for setting query params on the initial tab page? At the moment we only support query params on inner tabs pages, not on the root tabs page when clicking IonTabButton.

@liamdebeasi liamdebeasi added the needs: reply the issue needs a response from the user label Jun 21, 2022
@liamdebeasi liamdebeasi removed their assignment Jun 21, 2022
@ionitron-bot ionitron-bot bot added triage and removed triage needs: reply the issue needs a response from the user labels Jun 21, 2022
@gooddaddy
Copy link
Author

Thanks for the issue. Can you please provide your use case for setting query params on the initial tab page? At the moment we only support query params on inner tabs pages, not on the root tabs page when clicking IonTabButton.

My web app needs to implement a dynamic page, the navigation bar is dynamically configured on the web side, tabbutton needs to jump to the specified page that requires more query parameters.

@liamdebeasi liamdebeasi changed the title bug: IonTab props href which is contain 'search' did not work bug: react, cannot set query param on root tab button Jun 28, 2022
@liamdebeasi liamdebeasi added package: react @ionic/react package type: bug a confirmed bug report labels Jun 28, 2022
@ionitron-bot ionitron-bot bot removed the triage label Jun 28, 2022
@liamdebeasi liamdebeasi changed the title bug: react, cannot set query param on root tab button bug: angular/react/vue, cannot set query param on tab buttons May 11, 2023
@liamdebeasi liamdebeasi added package: angular @ionic/angular package package: vue @ionic/vue package type: bug a confirmed bug report and removed type: bug a confirmed bug report labels May 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: angular @ionic/angular package package: react @ionic/react package package: vue @ionic/vue package type: bug a confirmed bug report
Projects
None yet
Development

No branches or pull requests

2 participants