reactjs - 离子反应侧边菜单不显示

Question

我正在尝试向我的 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;

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

标签： reactjsionic-frameworktsxside-menu