[Bug]: How to use Suspense in latest react-router-dom ?

[deepakbhattmits]

What version of React Router are you using?

6.4

Steps to Reproduce

Unable to use Suspense form react with latest react-router-dom.I don't understand what is wrong with my code

import { FC, lazy, Suspense } from "react";
import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
const RootLayout = lazy(() => import("../reusable/RootLayout"));
const MainPage = lazy(() => import("../containers/MainPage"));
const NotFound = lazy(() => import("../components/NotFound"));

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<MainPage />} />
      <Route path="*" element={<NotFound />} />
    </Route>
  )
);
const ReactRouter: FC = (): JSX.Element => (
  <Suspense fallback={<p>Loading...</p>}>
    <RouterProvider router={router} />
  </Suspense>
);
export default ReactRouter;

Expected Behavior

It is very small application. It should render as expected .

Actual Behavior

react-dom.development.js:18687 The above error occurred in one of your React components:

    at Lazy
    at Suspense
    at ReactRouter
    at PersistGate (http://localhost:3000/static/js/bundle.js:51216:5)
    at Provider (http://localhost:3000/static/js/bundle.js:41268:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

[ly2ang]

did you solve the problem

[deepakbhattmits]

Hi Canbez,
I did not get any solution for that please let me know if you have any solution for that.

[deepakbhattmits]

timdorr did not get any solution for that from your side I am little socked why this is marked as Close please explain ?

[deepakbhattmits]

I am unable to resolve this issue

…

On Mon, Nov 7, 2022, 20:59 Yonatan Vigilio ***@***.***> wrote: did you solve the problem? — Reply to this email directly, view it on GitHub <#9349 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEU6V3HGGJPXB527TJNICWTWHEN7NANCNFSM6AAAAAAQXPXMDU> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[yurasytnyk]

you could try to wrap your route elements into the suspense component instead of the provider, because of the nature of Suspense you must wrap only lazy imported components. Hope I explained it well). Something like that

[yurasytnyk]

also, it may be better to wrap each route on its own if you will have for example different skeleton layouts for each page in the future

[yurasytnyk]

https://stackoverflow.com/questions/69949256/lazy-loading-in-react-router-dom-v6-0-2

[deepakbhattmits]

Hi @yurasytnyk ,
Thanks for reaching me out I have gone through what you have shared to me this is one of the way to handle this but I am little bit confuse then what is the use of RouterProvider that is from react-router-dom.
for your info I am usng latest `react-router-dom": "^6.4.2"

[yurasytnyk]

You can read about router variants here: https://reactrouter.com/en/main/routers/picking-a-router
Hope it will help you better understand what is the purpose of using RouterProvider

[wascou]

Hi, I think this is what you're looking for: https://reactrouter.com/en/main/guides/deferred