2

We are trying to use this kind of construct, so that a component rendered through React Router can be Lazy loaded using React Suspense:

      <Route
        path="about"
        element={
          <React.Suspense fallback={<>...</>}>
            <About />
          </React.Suspense>
        }
      />

The official React Router with Suspense example on Stackblitz works fine with React Router v6:

https://stackblitz.com/edit/github-rkrnhn-jfpo9b?file=src%2FApp.tsx

However it does not work with React Router v5. Nothing gets rendered.

https://stackblitz.com/edit/github-rkrnhn?file=package.json

The only difference between the two above is the React Router version. We also see this behavior if we try to implement Suspense in our app.

React Router v6 still has some features missing like see this unsolved issue so I need a v5 solution.

Is some different syntax needed for v5?

Dan
  • 1,249
  • 2
  • 16
  • 31
  • Does this answer your question? [React-router urls don't work when refreshing or writing manually](https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually) – TheRakeshPurohit Mar 11 '22 at 12:18
  • 1
    No, sorry. That looks to be something different, not related to React Suspense – Dan Mar 11 '22 at 13:16
  • Does this answer your question? [Lazy loaded React router routes loading anyway](https://stackoverflow.com/questions/60250800/lazy-loaded-react-router-routes-loading-anyway) – Drew Reese Mar 11 '22 at 16:37
  • @DrewReese that one seems to be more a case of the loading happening when not wanted. I'm just not seeing anything rendered at all in the failing example. – Dan Mar 13 '22 at 16:56
  • That was because they lazily loaded ***all*** their components, and then had some nested general components that triggered other dynamic imports to occur before they (*the OP*) was expecting them to. My answer there should get your code working though if you are trying to use per/route lazy loading working, it's using the v5 `Route` component API. – Drew Reese Mar 13 '22 at 23:29
  • 1
    Thanks @Drew your method there got me working in our production code. Note though you have some typos in your withSuspense() (the
    and props is not defined). I've accepted the answer below here, as Kanti has solved the Stackblitz example, although it didn't work fully in our real code.
     – Dan Mar 22 '22 at 12:07
  • Oh my.... that's a long time for a (*now very obvious*) typo to exist. I noticed a couple other discrepancies as well. Thanks for the heads up. Cheers. – Drew Reese Mar 22 '22 at 16:10

1 Answers1

3

here i updated stackblitz for React Route v5 pls check.

<React.Suspense fallback={<>..</>}>
        <Switch>
          <Layout>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route path="/dashboard" component={Dashboard} />
          </Layout>
        </Switch>
      </React.Suspense>

you can find here with example here

Kanti vekariya
  • 667
  • 3
  • 13