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 (
	    <Route path="/map" component={test}/>
	    <Route path="/notes" component={Notes}/>
	    <Route path="/add" component={Add}/>
	    <Route exact path = '/' render={() => <Redirect to ="/map"/>}/>
	  <IonTabBar slot='bottom'>
	    <IonTabButton tab='Map' href='/map'>
	      <IonIcon icon={triangle} />
	    <IonTabButton tab='Notes' href='/notes'>
	      <IonIcon icon={square} />

export default App;

This is the second time I’ve asked this to no response…clearly I’m asking it wrong, any tips for how I can ask correctly? It used to be more complicated and I included the Maps component, but now I just use a test component to show it has something to do with the routing and not maps itself. How else might I ask this?