React/Ionic 路由：无法读取未定义的属性 'startsWith'

Question

我正在尝试使用 Ionic (React) 构建选项卡导航。但是，我遇到了一个奇怪的错误 - 我假设它与的 href 属性有关，但我无法理解它。

确切的错误是：无法读取未定义的属性 'startsWith' - return props.currentPath.startsWith(href);

非常感谢任何见解。

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>

Answer 1

重新安装 Ionic 选项卡入门模板解决了这个问题。

Answer 2

我建议你看看这个离子反应演示 https://github.com/mehulmpt/ionic-react-demo 和这个 youtube 视频 https://www.youtube.com/watch?v=OmrPhSEdVPI

Answer 3

我遇到了同样的问题，并通过将 <Router>（导入 { BrowserRouter as Router } from react-router-dom）替换为 <IonReactRouter>（从 @ionic/react-router 导入）来修复它。

Answer 4

在我的例子中是一个资源问题，正在做：

cordova-res

解决我的问题

参考文献：Issue

React/Ionic 路由：无法读取未定义的属性 'startsWith'

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

routing

reactjs

ionic-framework

React/Ionic 路由：无法读取未定义的 属性 'startsWith'

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

routing

reactjs

ionic-framework

React/Ionic 路由：无法读取未定义的属性 'startsWith'