Repository navigation
bug: angular/react/vue, cannot set query param on tab buttons #25470
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
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
Reacted by Simon Golms and Emil Hölvold
Activity
liamdebeasi commentedon Jun 21, 2022
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.gooddaddy commentedon Jun 23, 2022
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.
[-]bug: IonTab props href which is contain 'search' did not work[/-][+]bug: react, cannot set query param on root tab button[/+][-]bug: react, cannot set query param on root tab button[/-][+]bug: angular/react/vue, cannot set query param on tab buttons[/+]holvold commentedon Oct 25, 2024
What is the status on this? I'm working with these version of ionic in react, and the problem still exists.
"@ionic/core": "7.6.3","@ionic/react": "7.6.3","@ionic/react-router": "7.6.3",fix(tabs): preserve query params and fragment from tab button href (i…
ionitron-bot commentedon Jun 19, 2026
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.
fix(tabs): preserve query params and fragment from tab button href (i…