React路由中Lazy与Suspense在导出路由时失效问题求助

错误原因 #

1. 语法错误：你直接在函数体里写了<Suspense>标签，React函数组件的JSX必须放在return语句内，否则会触发解析错误。
2. 未实际启用Lazy功能：你导入了lazy但没用来懒加载组件，等于没用到这个特性。

修正后的代码 #

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

// 用lazy懒加载所有需要的组件
const LoginPage = lazy(() => import('./path-to/LoginPage'));
const DashboardLayout = lazy(() => import('./path-to/DashboardLayout'));
const DashboardAppPage = lazy(() => import('./path-to/DashboardAppPage'));
const SimpleLayout = lazy(() => import('./path-to/SimpleLayout'));
const Page404 = lazy(() => import('./path-to/Page404'));

export default function Router() {
  const routes = useRoutes([
    {
      path: 'login',
      element: <LoginPage />
    },
    {
      path: '/dashboard',
      element: <DashboardLayout />,
      children: [
        { element: <Navigate to="/dashboard/app" />, index: true },
        { path: 'app', element: <DashboardAppPage /> }
      ],
    },
    {
      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中，包裹路由渲染结果
  return (
    <Suspense fallback={<div>加载中...</div>}>
      {routes}
    </Suspense>
  );
}

关键说明 #

• 所有需要懒加载的组件必须用lazy(() => import('组件路径'))的方式导入，替换原来的直接导入。
• <Suspense>必须包裹住包含懒加载组件的JSX结构，这里就是useRoutes返回的路由元素，所以要放在return语句里。
• fallback建议用非懒加载的简单组件（比如纯文字加载提示），如果用懒加载组件会导致无限加载循环。

内容的提问来源于stack exchange，提问作者user23154524