what should I do to load components by path in react - reactjs

Question

I am writing a react app with dynamic menu, when login into the system, the server will return the user menu with privilege. On the server side, I configure the react path of the menu will use. the component path look like this:
./system/dict
./me/password
./mde/password
./permission/role
when the client get the component path, I want to load the component by path, this is what I am doing right now:
menu: {
params: {
userId: initialState?.currentUser?.userId,
},
request: async (params, defaultMenuData) => {
if(initialState&&initialState.currentUser){
const menuData = await userMenuTree();
const menuWithComponents:any = loadComponents(menuData);
debugger
return menuWithComponents;
}
},
}
when get the memu config, get the component like this:
const loadComponents = (menus: API.MenuItem[]) => {
if(BaseMethods.isNull(menus)) return;
menus.forEach(menu =>{
const componentPath = menu.component;
const component = React.lazy(() => import(componentPath));
menu.component = component;
});
return menus;
}
it seems the lazy load components did not work. what should I do to load the components by path? Also tried using react-loadable like this "react-loadable": "^5.5.0":
import Loadable from 'react-loadable';
const loadComponents = (menus: API.MenuItem[]) => {
if(BaseMethods.isNull(menus)) return;
menus.forEach(menu =>{
const componentPath = menu.component;
//const component = React.lazy(() => import(componentPath));
let MyComponent = Loadable({
loader: () => import(componentPath),
loading: <div>Loading...</div>
});
menu.component = MyComponent;
});
return menus;
}
seems the result is a little bit different with the system loading components. what I want the component may look like this:
actually the loaded component by react-loadable look like this:
the react-loadable version "react-loadable": "^5.5.0".