Multiple layouts in Ionic 4 React routes

Question

I'm setting up a multiple layouts app structure in an Ionic 4 React application, and running into issues with IonContent and IonRouterOutlet.

I've used this (fairly common) React approach for multiple layouts: https://simonsmith.io/reusing-layouts-in-react-router-4

The concept is to use React Router's render function to render different layouts before the component for a route.

In my case, I have an EmptyLayout, which looks like this:

  render() {
    const { component: Component, ...rest } = this.props;

    return (
      <Route {...rest} render={routeProps => (
        <>
          <Header />
          <IonContent>
            <Component {...routeProps} />
          </IonContent>
        </>
      )} />
    )
  }
};

In my App component, I have routing setup as follows:

  render() {
    return (
      <IonApp>
        <IonReactRouter>
          <IonRouterOutlet>
            <Route path="/" component={Home} exact />
            <EmptyLayout path="/signup" component={SignUp} exact />
            <EmptyLayout path="/signin" component={SignIn} exact />
            <EmptyLayout path="/confirm-email" component={ConfirmEmail} exact />
            <EmptyLayout path="/forgot-password" component={ForgotPassword} exact />
            <EmptyLayout path="/reset-password" component={ResetPassword} exact />
          </IonRouterOutlet>
        </IonReactRouter>
      </IonApp>
    )
  }
}

export default App;

When navigating from /signin to /forgot-password using a React Router Link, IonContent from the SignIn component stays in the DOM, and blocks out ForgotPassword. If I remove IonContent, this issue goes away, but my header no longer renders.

If I remove IonRouterOutlet, this issue goes away, but I lose page transitions (among other Ionic routing features).

I've created a quick StackBlitz to illustrate this issue: https://stackblitz.com/edit/react-8sb7xz

Answer 1

I've been having similar problems getting the routes to render correctly, and struggling with the limited documentation. But I found that by rendering each route in <IonPage><IonContent>...</IonContent></IonPage> I could get them working.

I believe what you are doing is the opposite, <IonContent><IonPage>...<IonPage></IonContent>.

When these are switched around in your StackBlitz it seems to render correctly. https://stackblitz.com/edit/react-t6oauu?file=index.js

    const Hello = ({history}) => {
      return (
        <IonContent>
          <h1>Hello!</h1>
          <IonButton onClick={() => history.push("/bye")}>
            Goodbye
          </IonButton>
        </IonContent>
      )
    };

      <Route exact path="/" render={props => (
        <IonPage>
          <p>Fake Header</p>
          <Hello />
        </IonPage>
      )}/>