Question

我正在尝试使用Ionic（反应）构建选项卡导航。但是，我收到一个奇怪的错误-我假设它与的href属性有关，但我对此毫无意义。

确切的错误是：无法读取未定义的属性'startsWith'-返回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 Tabs入门模板可以解决此问题。

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

反应/离子路由：无法读取未定义的属性“ startsWith”

4 个答案: