1

I want apply lazy loading to specific routes. I want something like this:

import { lazy, Suspense } from "react";
import { Route, Routes } from "react-router-dom";
import NotLazyComponent from "./NotLazyComponent";

const LazyOne = lazy(() => import("./LazyOne"));
const LazyTwo = lazy(() => import("./LazyTwo"));

const App = () => {
  return (
    <Routes>
      <Route path="/not-lazy" element={<NotLazyComponent />} />
      <Suspense fallback={<div>Loading...</div>}>
        <Route path="/lazy-one" element={<LazyOne />} />
        <Route path="/lazy-two" element={<LazyTwo />} />
      </Suspense>
    </Routes>
  );
};

export default App;

but this won't work. What is the correct way to do that?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
nz_19
  • 61
  • 5

1 Answers1

0

Only the Route and React.Fragment components are valid children of the Routes component. Suspense needs to be rendered elsewhere.

You could wrap individual routes in the Suspense component:

const App = () => {
  return (
    <Routes>
      <Route path="/not-lazy" element={<NotLazyComponent />} />
      <Route
        path="/lazy-one"
        element={(
          <Suspense fallback={<div>Loading...</div>}>
            <LazyOne />
          </Suspense>
        )}
      />
      <Route
        path="/lazy-two"
        element={(
          <Suspense fallback={<div>Loading...</div>}>
            <LazyTwo />
          </Suspense>
        )}
      />
    </Routes>
  );
};

Create a layout route that wraps the lazily loaded nested route components:

import { Routes, Route, Outlet } from 'react-router-dom';

const SuspenseLayout = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <Outlet />
  </Suspense>
);

const App = () => {
  return (
    <Routes>
      <Route path="/not-lazy" element={<NotLazyComponent />} />
      <Route element={<SuspenseLayout />}>
        <Route path="/lazy-one" element={<LazyOne />} />
        <Route path="/lazy-two" element={<LazyTwo />} />
      </Route>
    </Routes>
  );
};

Or lift the Suspense component higher in the ReactTree outside the Routes component:

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/not-lazy" element={<NotLazyComponent />} />
        <Route path="/lazy-one" element={<LazyOne />} />
        <Route path="/lazy-two" element={<LazyTwo />} />
      </Routes>
    </Suspense>
  );
};
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • So, can I wrap regular components with Suspense without creating issues with lazy components? Also, could you please tell the difference between wrapping multiple lazy components with Suspense and individually applying it to each component? If I wrap multiple components, will they all load when I access a particular component? – nz_19 May 17 '23 at 21:24
  • 1
    @nz_19 (1) AFAIK, yes. This is actually how the ["official" lazy-loading example](https://github.com/remix-run/react-router/blob/dev/examples/lazy-loading/src/App.tsx) does it as well. (2) Not much of any difference other than one could be considered more **DRY** than the other. (3) No, I don't believe so, they should wait until the route is matched and the `element` is rendered from what I understand. – Drew Reese May 17 '23 at 21:29