Lazy Routes in Ionic React


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

      <Suspense fallback={<Loading />}>

and it will work as expected