React Ionic5如何在IonRouterOutlet中使用选项卡

问题描述

每当我更改选项卡时，都会出现错误，因为RouterOutlet路径未定义：

Uncaught TypeError: can't access property "split",path is undefined

handleChangeTab IonRouter.tsx:78
    onTabButtonClick IonTabBar.tsx:178
    handleIonTabButtonClick IonTabButton.tsx:23
    handler attachProps.ts:91

这是MainMenuPage组件，当URL为/mainmenu

时呈现

const MainMenuPage: React.FC<RouteComponentProps> = () => {
  return (
    <IonTabs>
      <IonTabBar slot="top" defaultValue="menu">
        <IonTabButton tab="passport">
          <IonIcon icon={personCircle} />
          <IonLabel>Passport</IonLabel>
        </IonTabButton>
        <IonTabButton tab="menu">
          <IonIcon icon={calendar} />
          <IonLabel>Menu</IonLabel>
          <IonBadge>6</IonBadge>
        </IonTabButton>

        <IonTabButton tab="settings">
          <IonIcon icon={map} />
          <IonLabel>Settings</IonLabel>
        </IonTabButton>
      </IonTabBar>

      <IonRouterOutlet>
        <Route path="/mainmenu/:tab(menu)" component={MainMenu} exact={true} />
        <Route path="/mainmenu/:tab(passport)" component={Passport} exact={true} />
        <Route path="/mainmenu/:tab(settings)" component={Settings} exact={true} />
      </IonRouterOutlet>
    </IonTabs>

根据（过时的？）文档（https://ionicframework.com/docs/api/tabs），我应该仅使用IonTabs组件，而不使用路由器插座。

但是随后本地文档显示了IonRouterOutlet的示例： https://ionicframework.com/docs/react/navigation#live-example

有什么帮助吗？我已经在这个问题上花了几个小时，并且掉了一些头发。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）