小编Pra*_*are的帖子

React Router v6 中的延迟加载路由

我正在尝试使用createBrowserRouterReact Router v6 中的函数延迟加载路由元素,但我不断收到此错误:`位置“/admin/reports/enrollees”处的匹配叶路由没有元素或组件。这意味着默认情况下它将呈现空值,从而导致“空”页面。这是我的路线文件:

export default createBrowserRouter([
    {
        path: '/admin/reports',
        children: [
            {
                path: '',
                element: <Index />,
            },
            {
                path: 'enrollees',
                lazy: () => import('../../components/Reports/Enrollees'),
            },
            {
                path: 'facilities',
                lazy: () => import('../../components/Reports/Facilities'),
            }
        ],
    }
])
Run Code Online (Sandbox Code Playgroud)

我一开始尝试这样做:

export default createBrowserRouter([
    {
        path: '/admin/reports',
        children: [
            {
                path: '',
                element: <Index />,
            },
            {
                path: 'enrollees',
                element: lazy(() => import('../../components/Reports/Enrollees')),
            },
            {
                path: 'facilities',
                element: lazy(() => import('../../components/Reports/Facilities')),
            }
        ],
    }
])
Run Code Online (Sandbox Code Playgroud)

但我得到了错误:Functions are not valid …

reactjs react-router async-components react-router-dom

1
推荐指数
2
解决办法
5381
查看次数