react-router-dom v6 动态路由报错

[ohohohh]

export const meunsTreeSelect = (data: any) => {
const item: any = [];
data.forEach((list: any) => {
const newData = {};
const meta = {};
meta.title = list.name;
newData.meta = meta;
newData.path = list.path;
newData.element = lazyLoad(list.component);
newData.children = list.children ? meunsTreeSelect(list.children) : null; // 如果还有子集，就再次调用自己
item.push(newData);
});
return item;
};



const lazyLoad = (moduleName: string) => {
let Module;
if (moduleName === 'layouts') {
Module = lazy(() => import(`@/${moduleName}/index.tsx`));
} else {
Module = lazy(() => import(`@/pages/${moduleName}.tsx`));
}
return (
<Suspense fallback={<>加载中...</>}>
<Module />
</Suspense>
);
};

点击菜单后，报错
Uncaught TypeError: Cannot read properties of undefined (reading '0')

[ohohohh]

最后生成的路由如下

[ohohohh]

报错信息

[wenerme]

import(`@/${moduleName}/index.tsx`)); 不能包含变量

[ohohohh]

@wenerme #3 如果有变量要如何处理？

[wenerme]

@ohohohh 罗列所有变量，做 map ，不推荐使用 webpack 的动态能力做动态分割