Reactjs React Ionic5如何将选项卡与IonRouteOutlet一起使用

无论何时更改选项卡，我都会收到一个错误，因为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>

常量MainMenuPage:React.FC=（）=>{
返回(
护照
菜单
6.
设置

根据（过时的？）文档（）我应该只使用IonTabs组件，而不使用路由器插座

但是本机文档显示了一个使用IonRouteOutlet的示例：

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