Set up Route for IonSideMenu Ionic-React

Issue

How do i add route in my dashboard component to show ion-drawer, it looks a little tricky with ionic-react-router.

Since i can have a single IonRouterOutlet

<IonRouterOutlet>
          <Route path="/" component={Home} exact={true} />
          <Route exact path="/dashboard" component={Dashboard} />
          <Route path="/login" component={Login} />
          <Route path="/signup" component={Signup} />
        </IonRouterOutlet>

Dashboard.tsx

<IonPage className="ion-padding">
      <IonMenu side="start" menuId="first" contentId="main">
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>Start Menu</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonList>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
          </IonList>
        </IonContent>
      </IonMenu>
      <h3>Dashboard</h3> // Only this is rendered

      <IonRouterOutlet id="main"></IonRouterOutlet>
    </IonPage>

Solution

I suggest using starter temple to generate your application - ionicframework.com/docs/cli/commands/start

Answered By - Aaron Saunders