[Help] Nested layouts in ionic react router v5?

Ionic Framework Ionic React
1

App.jsx

<IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/layoutA">
          <LayoutA/>
        </Route>

        <Route path="/layoutB">
          <LayoutB />
        </Route>

        <Route>
          <NotFound />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>

LayoutA.jsx

<IonPage>
      <Header />

      <Menu />

      <IonRouterOutlet>
        <Route path="/">
          <Page1 />
        </Route>

        <Route path="/page2">
          <Page2 />
        </Route>

        <Route>
          <Redirect to="/" />
        </Route>
      </IonRouterOutlet>
    </IonPage>

When I navigate to /layoutA/page2 I can’t see my Page2! Am I missing something?

2

What is inside <Page2>? If it contains <IonPage>, you may have a problem.

3

Yes there is another <IonPage> inside <Page2> why is there a problem?

4

Basically, in Ionic React, each IonPage is a page/screen/view.

As stated in the docs:

The IonPage component wraps each view in an Ionic React app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an IonPage component.

In other words, it’s best to wrap everything that is on each view/screen in the <IonPage> that is a direct child of the relevant <Route> component. Trying to share a header/menu among pages will probably break; instead, try wrapping the header/menu in their own components and importing those components on each page you need them.

For example, if you have the back button in the <Header> component, you are likely going to see navigation failures because it won’t see the pages (Page1, Page2) rendered “beneath” it.

As for why you can’t see page 2, it’s because you defined the route as /page2. If you want the route to be /layout/page2, then you need to specify the route as /layout/page2. A child IonRouterOutlet will not be “nested” in a parent IonRouterOutlet.

In general, IonRouter works like React Router v5 but with some of the support for nested routes in React Router 5 removed. This is because of IonRouter’s support for tabs on mobile.