React/Ionic routing: cannot read property 'startsWith' of undefinded

Issue

I'm trying to build a tab navigation with Ionic (React). However, I'm getting a weird error - I'm assuming it has something to do with the href attribute of the but I can't make any sense of it.

The exact error is: Cannot read property 'startsWith' of undefined - return props.currentPath.startsWith(href);

Any insight is much appreciated.

TabRoot.js:

           <IonRouterOutlet>
                <Route path="/:tab(tab1)" component={NewsPage} exact></Route>
                <Route path="/:tab(tab2)" component={TranslatorPage} exact></Route>
                <Route path="/:tab(tab3)" component={ConverterPage} exact></Route>
            </IonRouterOutlet>

            <IonTabBar slot="bottom">
                <IonTabButton tab="news" href="/tab1">
                    <IonIcon name="flash"></IonIcon>
                </IonTabButton>
                <IonTabButton tab="translator" href="/tab2">
                    <IonIcon name="git-compare" />
                </IonTabButton>
                <IonTabButton tab="converter" href="/tab3">
                    <IonIcon name="cash"></IonIcon>
                </IonTabButton>
            </IonTabBar>

App.js:

         <Router>
            <div className="App">
             <Switch>
                  <Route exact path='/' component={TabRoot}></Route>
            </Switch>
         </div>
         </Router>

Solution

Reinstalling the Ionic tabs starter template fixed the issue.

Answered By - suuuriam