Ionic React - how to hide the Ion-Split-Pane when in the login and registration page

import React, { useEffect, useState } from "react";import {  IonApp,  IonRouterOutlet,  IonSpinner,  IonSplitPane,} from "@ionic/react";import { Route, Redirect } from "react-router-dom";import { IonReactRouter } from "@ionic/react-router";import Filter from "./pages/Filter";import TabsMenu from "./pages/TabsMenu";import Home from "./pages/Home";import Login from "./pages/Login";import Register from "./pages/Register";/* 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";import "./theme/theme.css";import { getCurrentUser } from "./firebaseSetup";import { useDispatch } from "react-redux";import { setUserState } from "./redux/actions";import SideMenu from "./components/SideMenu";import ProfileContactsContextProvider from "./data/profileContactsContextProvider";import ProfileAboutsContextProvider from "./data/profileAboutsContextProvider";import ProfileEducationsContextProvider from "./data/profileEducationsContextProvider";import ProfileExperiencesContextProvider from "./data/profileExperiencesContextProvider";import ProfileInterestsContextProvider from "./data/profileInterestsContextProvider.tsxsContextProvider";import ProfileSkillsContextProvider from "./data/profileSkillsContextProvider";const RoutingSystem: React.FC = () => {  return (<IonReactRouter><IonSplitPane className="n" contentId="main"><SideMenu /><ProfileAboutsContextProvider><ProfileContactsContextProvider><ProfileEducationsContextProvider><ProfileExperiencesContextProvider><ProfileInterestsContextProvider><ProfileSkillsContextProvider><IonRouterOutlet id="main"><Route path="/" component={Home} exact /><Route path="/login" component={Login} exact /><Route path="/register" component={Register} exact /><Route path="/filter" exact><Filter /></Route><Route path="/tabs" exact><TabsMenu /></Route><Redirect to="/tabs" /></IonRouterOutlet></ProfileSkillsContextProvider></ProfileInterestsContextProvider></ProfileExperiencesContextProvider></ProfileEducationsContextProvider></ProfileContactsContextProvider></ProfileAboutsContextProvider></IonSplitPane></IonReactRouter>  );};const App: React.FC = () => {  const [busy, setBusy] = useState(true);  const dispatch = useDispatch();  useEffect(() => {    getCurrentUser().then((user: any) => {      console.log(user);      if (user) {        dispatch(setUserState(user.email));        window.history.replaceState({}, "/", "/tabs/newsfeed");      } else {        window.history.replaceState({}, "", "/");      }      setBusy(false);    });  }, []);  return (<IonApp>      {busy ? (<IonSpinner className="spinnerCenter" name="bubbles" color="primary" />      ) : (<RoutingSystem />      )}</IonApp>  );};export default App;

import React from "react";import {  IonMenu,  IonHeader,  IonToolbar,  IonTitle,  IonContent,  IonItem,  IonIcon,  IonLabel,  IonToggle,} from "@ionic/react";import { moon, logoGithub } from "ionicons/icons";const SideMenu: React.FC = () => {  return (<IonMenu contentId="main"><IonHeader><IonToolbar><IonTitle>Opportunity</IonTitle></IonToolbar></IonHeader><IonContent><IonItem><IonIcon slot="start" icon={moon} /><IonLabel>Dark Mode</IonLabel><IonToggle            color="primary"            slot="end"            name="darkMode"            onIonChange={toggleDarkModeHandler}          /></IonItem><IonItem          button          href="https://github.com/ionic-team/ionic"          routerDirection="none"><IonIcon slot="start" icon={logoGithub} /><IonLabel>Github Repo</IonLabel></IonItem></IonContent></IonMenu>  );};const toggleDarkModeHandler = () => {  document.body.classList.toggle("dark");};export default SideMenu;

import React, { useState } from "react";import {  IonHeader,  IonContent,  IonToolbar,  IonTitle,  IonPage,  IonInput,  IonButton,  IonLoading,  IonButtons,  IonBackButton,} from "@ionic/react";import { Link, useHistory } from "react-router-dom";import { loginUser } from "../firebaseSetup";import { toast } from "../toast";import { setUserState } from "../redux/actions";import { useDispatch } from "react-redux";const Login: React.FC = () => {  const [busy, setBusy] = useState<boolean>(false);  const history = useHistory();  const dispatch = useDispatch();  const [username, setUsername] = useState("");  const [password, setPassword] = useState("");  async function login() {    setBusy(true);    const res: any = await loginUser(username, password);    if (res) {      console.log(res);      dispatch(setUserState(res.user.email));      history.replace("/tabs/newsfeed");      toast("You have logged in!");    }    setBusy(false);  }  return (<IonPage><IonHeader><IonToolbar><IonButtons slot="start"><IonBackButton defaultHref="/" /></IonButtons><IonTitle>Login</IonTitle></IonToolbar></IonHeader><IonLoading message="Please wait.." duration={0} isOpen={busy} /><IonContent className="ion-padding"><IonInput          placeholder="Email?"          onIonChange={(e: any) => setUsername(e.target.value)}        /><IonInput          type="password"          placeholder="Password?"          onIonChange={(e: any) => setPassword(e.target.value)}        /><IonButton onClick={login}>Login</IonButton><p>          New to Opportunity? <Link to="/register">Register</Link></p></IonContent></IonPage>  );};export default Login;