How do i setup IonTabButton and IonRouterOutlet to use hash router

Ionic Framework Ionic React
#1

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?

#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>
);