Hi.
does anyone knows how to use a hash router with IonTabButton?
I’ve trying to get it working for a while and no success
<IonReactHashRouter>
<IonRoute path="/" render={p => {
return (
<div><Yolo/></div>
)
}} />
</IonReactHashRouter>
<IonTabButton tab="map">
<IonIcon icon={map} />
<IonLabel>Map</IonLabel>
</IonTabButton>
I have the router working but not the IonTabButton, does anyone knows how to get it working?
max
2
I just started a fresh Ionic React tabs app and replaced IonReactRouter
with IonReactHashRouter
and tabs work fine.
You need to have a href
on IonTabButton
:
const App: React.FC = () => (
<IonApp>
<IonReactHashRouter>
<IonTabs>
<IonRouterOutlet>
<Route path="/tab1" component={Tab1} exact={true} />
<Route path="/tab2" component={Tab2} exact={true} />
<Route path="/tab3" component={Tab3} />
<Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tab1">
<IonIcon icon={triangle} />
<IonLabel>Tab 1</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tab2">
<IonIcon icon={ellipse} />
<IonLabel>Tab 2</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tab3">
<IonIcon icon={square} />
<IonLabel>Tab 3</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonReactHashRouter>
</IonApp>
);