React Router v6中使用createBrowserRouter懒加载路由报错求助

错误原因分析 #

1. 第一种写法（用lazy字段）
   React Router v6 的 createBrowserRouter 路由配置中没有lazy这个属性，你把懒加载逻辑写在lazy字段里，导致路由找不到对应的element，所以出现报错：

Matched leaf route at location "/admin/reports/enrollees" does not have an element or Component. This means it will render an with a null value by default resulting in an "empty" page.

2. 第二种写法（直接给element赋值lazy()）
   React.lazy()返回的是一个组件类型，而路由的element需要的是JSX元素（比如<Component />），直接把组件函数赋值给element，就会触发报错：

函数不能作为React子元素使用。这可能是因为你在render中返回了组件本身而非

return (<Component />)

，或者你本应调用这个函数而非返回它。

正确实现方式 #

要在React Router v6中实现路由懒加载，需要结合React.lazy()和React.Suspense，步骤如下：

1. 导入必要的API

import { createBrowserRouter, Outlet } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import Index from './path/to/Index'; // 替换为你的Index组件实际路径

2. 定义懒加载组件

const Enrollees = lazy(() => import('../../components/Reports/Enrollees'));
const Facilities = lazy(() => import('../../components/Reports/Facilities'));

3. 配置路由并添加Suspense
   在父路由中用Suspense包裹Outlet，为所有子路由的懒加载组件提供加载状态：

export default createBrowserRouter([
  {
    path: '/admin/reports',
    // 父路由添加Suspense处理加载中状态
    element: (
      <Suspense fallback={<div>加载中...</div>}>
        <Outlet />
      </Suspense>
    ),
    children: [
      {
        path: '',
        element: <Index />,
      },
      {
        path: 'enrollees',
        element: <Enrollees />, // 渲染懒加载组件
      },
      {
        path: 'facilities',
        element: <Facilities />,
      },
    ],
  },
]);

补充说明 #

• Suspense的fallback属性可以自定义加载时的UI（比如骨架屏、加载动画）
• 也可以单独给每个懒加载路由的element包裹Suspense，但父路由统一包裹更简洁

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