如何通过特定页面禁用Ionic React上的侧菜单

Question

我有一个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;

Answer 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
}