Compile stuck bug IonMenuToggle wrap withRouter

I try wrapping routes with withRouter so that I can conditionally rendered components.
Problem was It compile stucks when IonMenuToggle was used

And Also when we try to remove IonMenuToggle, it compiles fine

why are you passing the the route into the menu? also what you are trying to do is hide and show the menu based on a specific state… so create a state variable.

const showMenu = route.location.pathname !== '/login'  &&
                 route.location.pathname !== '/details'
return (
   <IonSplitPane contentId="main">
      { showMenu === true ? <Menu route={route} /> : null }
     ... rest of code
   </IonSplitPane>
)

you can see my approach here in this video

im sending the route because I will use location property in menu.Just never mind that

I just seen a bug whenever I will use IonMenuToggle to menu it will triggers this compile bug. But if I comment it out it will works fine.
Even though it will compile stuck . If I refresh the browser manually it has no error and works fine but the CLI always stuck on compiling…

Did you try what I suggested?

created a simple ionic-react sample here:

just look on App.tsx . I try to wrap the routes with menu with withRouter
try to make changes and compile it will replicate the bug
npm install first cause I delete the node modules

you dont need the route, you can use the useHistory hook also best to load project in stackblitz or codesandbox

hmmm i need the withRouter so that it will always send location property everytime it will change path

can you make sample to the one I send. that it will not show the menu component on specific route paths.

const Page: React.FC = () => {

  const location = useLocation();
  const { name } = useParams<{ name: string; }>();

  const renderMenu = () => {
    if (location.pathname === "/page/Inbox") {
      return null
    } else {
      return <IonMenuButton />
    }
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            {renderMenu()}
          </IonButtons>
          <IonTitle>{name}</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">{name}</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer name={name} />
      </IonContent>
    </IonPage>
  );
};

export default Page;
const Menu: React.FC = () => {
  const location = useLocation();

  console.log(location.pathname);

  if (location.pathname === "/page/Inbox") return null;
  
  return (
    <IonMenu contentId="main" type="overlay">
    ... rest of code
  );
};

export default Menu;

ohw thank you gonna try it out
Thanks