CODEWITHSUNDEEP
react-routerreact-suspense
Dan
Dan

Reputation: 1411

React Router with Suspense failing to render with React Router v5

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?

Upvotes: 2

Views: 2098

Answers (1)

Kanti vekariya
Kanti vekariya

Reputation: 697

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

Upvotes: 3

Related Questions