使用 Ionic React 从 IonMenu 重定向到页面答案

【问题标题】：Redirect from IonMenu to a page using Ionic React使用 Ionic React 从 IonMenu 重定向到页面
【发布时间】：2020-05-27 16:52:41
【问题描述】：

我在 Ionic Framework 中使用 React 创建了一个菜单，我想重定向到用户单击的页面，但这没有发生，项目不可单击。我已经尝试过使用 IonButton 而不是 IonItem 并且可以正常工作！

    <IonMenu side="start" contentId="content">
      <IonHeader>
        <IonToolbar>
          <IonTitle>Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent id="content">
        <IonList>       
          <IonItem routerLink="/Home">
                <IonIcon slot="start" icon={home}></IonIcon>
                <IonLabel>Home</IonLabel>
          </IonItem>    
          <IonItem routerLink="/Activities">
                <IonIcon slot="start" icon={bicycle}></IonIcon>
                <IonLabel>Activities</IonLabel>
          </IonItem>
          <IonItem routerLink="/Login">
                <IonIcon slot="start" icon={exit}></IonIcon>
                <IonLabel>Logout</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>

【问题讨论】：

标签： reactjs ionic-framework redirect routes

【解决方案1】：

您需要对 IonRouterOutlet 的引用，指向与属性 content 中相同的 id 并定义与菜单匹配的所有路由。

<IonApp>
  <IonReactRouter>
    <IonSplitPane contentId="content">
      <Menu />
      <IonRouterOutlet id="main">
        <Route path="/Home" component={Home} exact={true} />
        <Route path="/Activities" component={Activities} exact={true} />
        <Route path="/Login" component={Login} exact={true} />
        <Route path="/Logout" component={Logout} exact={true} />
        <Route path="/" render={() => <Redirect to="/Home" />} exact={true} />
      </IonRouterOutlet>
    </IonSplitPane>
  </IonReactRouter>
</IonApp>

【讨论】：