离子反应侧菜单未显示

如何解决离子反应侧菜单未显示

我正在尝试向我的 ionic react 应用程序添加侧边菜单，但它没有显示。我不确定我是否遗漏了一些完全明显的内容，但我只想在担心如何将其链接到页面之前能够看到它。

这里是组件 SideMenu.tsx

import { withRouter } from "react-router-dom";
import {
  IonMenu,IonHeader,IonToolbar,IonTitle,IonContent,IonList,IonItem,IonMenuToggle,IonLabel,} from "@ionic/react";

const SideMenu = () => {
  return (
    <IonMenu contentId="main">
      <IonHeader>
        <IonToolbar>
          <IonTitle>Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonMenuToggle>
            <IonItem>
              <IonLabel>Home</IonLabel>
            </IonItem>
          </IonMenuToggle>
          <IonMenuToggle>
            <IonItem>
              <IonLabel>Page 1</IonLabel>
            </IonItem>
          </IonMenuToggle>
          <IonMenuToggle>
          <IonItem>
              <IonLabel>Page 2</IonLabel>
            </IonItem>
          </IonMenuToggle>
        </IonList>
      </IonContent>
    </IonMenu>
  );
};

export default withRouter(SideMenu); 

我在 App.tsx 文件中添加了 SideMenu。

这是 App.tsx 文件

import {
  IonApp,IonIcon,IonRouterOutlet,IonTabBar,IonTabButton,IonTabs,} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { list,scan,home } from 'ionicons/icons';
import HomePage from './pages/HomePage';
import PageOne from './pages/PageOne';
import PageTwo from './pages/PageTwo';
import SideMenu from './components/SideMenu';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <SideMenu />
      <IonTabs>
        <IonRouterOutlet id="main">
          <Route exact path="/home">
            <HomePage />
          </Route>
          <Route exact path="/pagetwo">
            <PageTwo />
          </Route>
          <Route path="/pageone">
            <PageOne />
          </Route>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="home" href="/home">
            <IonIcon icon={home} />
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

无法弄清楚我做错了什么以及为什么它没有显示？任何帮助将不胜感激。