Iontabs route only works once

here’s the snippet below. The app starts in the root which redirects to maps, which is the test component which just renders ‘hello’. When I click over to Notes it works fine, but when I click on “Maps” in the toolbar nothing happens. Although the URL changes. If I go to the URL and just hit enter there it works! So using the tabs don’t work but entering the URL in the URL bar works.

function test () {
  return <div>hello</div>
}

function App () {

  return (
  <IonApp>
    <IonReactRouter>
      <IonContent>
	<IonTabs>
	  <IonRouterOutlet>
	    <Route path="/map" component={test}/>
	    <Route path="/notes" component={Notes}/>
	    <Route path="/add" component={Add}/>
	    <Route exact path = '/' render={() => <Redirect to ="/map"/>}/>
	  </IonRouterOutlet>
	  <IonTabBar slot='bottom'>
	    <IonTabButton tab='Map' href='/map'>
	      <IonIcon icon={triangle} />
	      <IonLabel>Map</IonLabel>
	    </IonTabButton>
	    <IonTabButton tab='Notes' href='/notes'>
	      <IonIcon icon={square} />
	      <IonLabel>Notes</IonLabel>
	    </IonTabButton>
	  </IonTabBar>
	</IonTabs>
      </IonContent>
    </IonReactRouter>
  </IonApp>
  );
}

export default App;

1 post - 1 participant

Read full topic