IonMenu 在 Ionic React 中不可见？

如何解决IonMenu 在 Ionic React 中不可见？

我的目标是在离子“标题/工具栏”的左上角获得一个汉堡式菜单。我已经阅读了有关 IonMenu、IonHeader、IonToolbar 等的所有文档，并且我一直在到处复制示例代码的变体，但我一生都无法让这个东西可见。一旦我添加了 IonMenu 组件，整个标题/工具栏就会消失。

这基本上就是我所拥有的......

const Tab1: React.FC = () => {
return (
<IonPage>
        <IonMenu side="start" menuId="first" contentId="IonRouterOutlet">
            <IonHeader>
                <IonToolbar color="primary">
                    <IonTitle>Start Menu</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent>
                <IonList>
                    <IonItem>Menu Item</IonItem>
                    <IonItem>Menu Item</IonItem>
                    <IonItem>Menu Item</IonItem>
                    <IonItem>Menu Item</IonItem>
                </IonList>
            </IonContent>
        </IonMenu>
        <IonContent>
... ionic-content ...
</IonContent>
</IonPage>

上面的 Tab1 组件被包裹在一个 IonRouterOutlet 中，如下所示：

<IonApp>
        <IonReactRouter>

            <IonTabs>
                <IonRouterOutlet>
                    <Route exact path="/tab1">
                        <Tab1/>
                    </Route>

我可以让 IonHeader 和 IonToolbar 可见，就像我想要的那样，当它们单独存在时，但是一旦我将它们放在 IonMenu 下方，它们就会消失。我该怎么做？