Lazy Routes in Ionic React

Hi,

Just delving into Ionic-React and am looking to determine if the Ionic React Router supports (route based) lazy loading? I can’t find any mention in the docs, and it’s pretty fundamental for start-up optimisation…

I tried using React Lazy/Suspense - but it didn’t work

1 Like

I use make React Lazy on the route level.

Import a fallback component and lazy import your other one.

import React, { Suspense, lazy } from "react";
import Loading from "./pages/Loading";
const MyComponent = lazy(() => import("./MyComponent"));

In the rendering part wrap your IonReactRouter with React.Suspense and use your lazy loaded components like before

...
 <IonApp>
      <Suspense fallback={<Loading />}>
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              <Route
                path="/home/"
                component={MyComponent}
                exact={true}
              />
...

and it will work as expected

1 Like