Ionic/react - nested routes

Ionic Framework Ionic React
12

I know I’m late posting to this thread, but I have nested routes working by wrapping the nested <IonRouterOutlet> in <IonPage>.

For example, taking the example of the OP’s code:

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/">
          <HomeRouter />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);


const HomeRouter: React.FC = () => {
  return (
    <IonPage>
     <IonRouterOutlet>
        <Route path="/" exact>
          <Home />
        </Route>
        <Route path="/page1">
          <Page1 />
        </Route>
        <Route path="/page2">
          <Page 2 />
        </Route>
      </IonRouterOutlet>
    </IonPage>
  );
};

Using react-query and lazy loading I have code splitting working, too.

1 Like