反应路由器动态

Question

我制作了一个带有动态菜单的应用程序。我也想要动态路线。

我使用工具板。

我的例子：

在configureRouters.js中

const navigationItems = [    
    { title: "", icon:"",element:"Dashboard", path: '/TestStagionatura/Dashboard' },
    { title: "", icon: "", element: "EntrataMerce", path '/TestStagionatura/EntrataMerce' },
]

const getItemsMenu = () => {
    var children = []


    navigationItems.map(async (item) => {

               
        children.push(
            {
                path: item.path,
                lazy: () => import(`../pages/${item.element}`), // 💤 Lazy load!
            },
        )
        
    })
  

    return children;
}

const configureRouters = () => {


    var router1 = createBrowserRouter([
        {
            Component: App,
            children: [
                {
                    path: '/',
                    Component: Layout,
                },
                {
                    path: '/TestStagionatura',
                    Component: Layout,
                    children: getItemsMenu(),
                },
            ],
        },
        {
            path: '/TestStagionatura/auth',
            Component: AuthLayout,
            children: [
                {
                    path: 'login',
                    element: <Login
                        url={process.env.REACT_APP_API_URL_VALIDATE}
                        application={process.env.REACT_APP_API_APP_CODE} />,
                }
            ],
        },
        {
            path: '/TestStagionatura/NotAuthorized',
            element: <NotAuthorize description={'You do not have access for plant'} serviceName={'Seasoning Hams'} />
        },
    ]);


    return router1;
}

在app.js中

    return (

        <AppProvider
            session={session}  
            authentication={authentication}
            navigation={NAVIGATION}
            branding={BRANDING}            
        >            
            <Outlet />            
        </AppProvider>
    );

在index.js中

const router = configureRouters();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(  
    <Provider store={store}>
        <RouterProvider router={router} fallbackElement={<p>Loading...</p>} /> 
    </Provider>
);

在layout.js中

 return (
     <Box>
         {isAccess  ?
             <DashboardLayout hideNavigation={false} slots={{ toolbarActions: Plant, sidebarFooter: SidebarFooter }}>
                 <Outlet />
             </DashboardLayout >

.......

错误验证： 位置“/TestStagionatura/Dashboard”处的匹配叶路由没有元素或组件。这意味着默认情况下它将呈现一个具有空值的，从而导致“空”页面。错误组件堆栈

我想加载导航。

Answer 1

您遇到的问题的发生是因为您在

getItemsMenu()

中动态生成的路线缺少关键部分：它们没有为路线定义

Component

或

element

。在

createBrowserRouter

设置中，路线必须具有：

1. A

   Component

   ，用于使用 JSX 的 React 组件。
2. React 元素的

   element

   。

问题分析

在

getItemsMenu

中，您正在映射

navigationItems

并动态创建路线对象。但是，您用来动态导入组件的

lazy

函数是不正确的。

createBrowserRouter

不会直接将

lazy

解释为有效属性。相反，您应该将

React.lazy

与

Component

属性结合使用。

解决方案

更新 getItemsMenu

使用

React.lazy

动态导入组件，并确保正确设置

Component

属性。

import React from 'react';

const navigationItems = [
    { title: "", icon: "", element: "Dashboard", path: '/TestStagionatura/Dashboard' },
    { title: "", icon: "", element: "EntrataMerce", path: '/TestStagionatura/EntrataMerce' },
];

const getItemsMenu = () => {
    return navigationItems.map((item) => ({
        path: item.path,
        Component: React.lazy(() => import(`../pages/${item.element}`)), // Dynamic lazy loading
    }));
};