如何通过特定页面路由来禁用 Ionic React 中的侧边菜单？答案

【问题标题】：How to disable sidemenu on Ionic React by routing through certain page?如何通过特定页面路由来禁用 Ionic React 中的侧边菜单？
【发布时间】：2020-11-09 01:05:55
【问题描述】：

我有一个 Ionic-React 应用程序，它在主页上有一个侧边菜单。我正在使用 IonicSplitPane 和 IonReactRouter 来实现这一点。但是，通过登录页面路由时，我无法禁用侧边菜单。我尝试了以下代码并且它有效，但侧面菜单中的路由现在不起作用。我该如何解决这个问题？

import Menu from './components/Menu';
import Page from './pages/Page';
import React from 'react';
import { IonApp,IonRouterOutlet, IonSplitPane } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Redirect, Route } from 'react-router-dom';
import Home from './pages/Home';
import Login from './pages/Login';

/* 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 = () => {

  return (
    <IonApp>
       <IonSplitPane contentId="main">
      <IonReactRouter>
      {/*<!--  Side Menu  -->*/}
          <Menu />
       {/*<!--  Main Content  -->*/}   
          <IonRouterOutlet id="main">
            <Route path="/page/:name" component={Page} exact />
            <Redirect from="/" to="/page/home/gallery" exact />
            <Route path="/page/home/gallery" component={Home} exact />
          </IonRouterOutlet>
          
          </IonReactRouter>
        </IonSplitPane>

      {/*<!--  No Sidemenu  -->*/} 
        <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/page/login" component={Login} exact />
          </IonRouterOutlet>
          </IonReactRouter>

    </IonApp>
  );
}

export default App;

【问题讨论】：

标签： reactjs ionic-framework

【解决方案1】：

你可以在用户未登录时通过禁用菜单来处理它，保留原来的路由结构

const Menu: React.FC<any> = ({
  history,
}) => {
/** MENU CODE HERE **/

return return state.loggedIn ? (
    <IonMenu contentId="main" type="overlay" disabled={false}>
      <IonContent>
        <IonList id="inbox-list">
        </IonList>
      </IonCOntent>
    </IonMenu>
 ): null
}

【讨论】：