CODEWITHSUNDEEP
reactjsreact-routerreact-lazy-load
user23154524
user23154524

Reputation: 11

Lazy and suspense not working for export route

I tried to lazy and suspense in my routes.js page.

import { Navigate, useRoutes } from 'react-router-dom';
import { lazy,Suspense } from 'react';

export default function Router() {
  <Suspense fallback={<DashboardAppPage/>}>
  const routes = useRoutes([
    {
      path: 'login',
      element: <LoginPage />},
    {
      path: '/dashboard',
      element: <DashboardLayout />,
      children: [
        { element: <Navigate to="/dashboard/app" />, index: true },
   
      ],
    },
   
    
    {
      element: <SimpleLayout />,
      children: [
        { element: <Navigate to="/login" />, index: true },
        { path: '404', element: <Page404 /> },
        { path: '*', element: <Navigate to="/404" /> },
      ],
    },
    {
      path: '*',
      element: <Navigate to="/404" replace />,
    },
  ]);
  </Suspense>

  return routes;
}

In the code the "Suspense tag is not working.

Parse errors in imported module './routes': Unexpected token, expected "}" (37:10) (37:10)

Upvotes: 0

Views: 48

Answers (1)

Drew Reese
Drew Reese

Reputation: 203393

The code you are working with isn't valid Javascript. The Suspense component should be rendered as part of the returned JSX that Router is rendering, e.g. that it returns.

Consider the following rewrite:

Return Suspense wrapping routes.

export default function Router() {
  const routes = useRoutes([
    { path: 'login', element: <LoginPage /> },
    {
      path: 'dashboard',
      element: <DashboardLayout />,
      children: [
        { element: <Navigate to="/dashboard/app" />, index: true }, 
      ],
    },   
    {
      element: <SimpleLayout />,
      children: [
        { element: <Navigate to="/login" />, index: true },
        { path: '404', element: <Page404 /> },
        { path: '*', element: <Navigate to="/404" /> },
      ],
    },
    {
      path: '*',
      element: <Navigate to="/404" replace />,
    },
  ]);

  return (
    <Suspense fallback={<DashboardAppPage />}>
      {routes}
    </Suspense>
  );
}

Upvotes: 0

Related Questions