react中通过useRoutes从后台动态获取路由表

最近在研究react，网上普遍评价react比VUE要难，真正自己学起来的切身感受就是react要比vue用到的东西多，而且对JS的功底要求比VUE要高，可能这也就是为什么大家觉得react比VUE难的原因了，1是大量的API，各种的hook让人有点懵，2是各种的乱入，需要前后标签呼应，这种无疑是一种比较糟糕的体验，但是我觉得习惯了的话应该还不错，因为和VUE比起来react更贴近原生的HTML和JS，好了，扯这么多来说说今天的问题把，我这里用的是react-router-dom V6,里面有一个声明路由的东西我很喜欢，那就是useRoutes(),比起那种要一个一个在页面写的方式我更喜欢这种，可配置，但是写的时候我发现了一个很严重的问题，那就是路由配置的时候如果是由后台传回来的根本就没法按照要求返回组件，比如：

const menu=[{
    path:'/login',
    element:<Login></Login>,
    showMenu:false
},{
    path:'/home',
    icon:<AppstoreOutlined></AppstoreOutlined>,
    element:<Main></Main>,
    showMenu:false,
    children:[{
        path:'list',
        label:"列表",
        icon:<PieChartOutlined></PieChartOutlined>,
        element:<List></List>,
        showMenu:true
    }],
},{
    path:'/',
    element:defaultPage()
},{
    path:'*',
    element:<Nopage></Nopage>
}];
useRoutes(menu);

这里的menu应该是后台返回来的，但是后台返回的肯定是json，不会有这个element:<List></List>，如果这样肯定前台就无法渲染了，这个问题思考了很久，最终找到了一个简单的处理办法，可能不是最优解，希望有大神指点，下面给出我的解决办法

const Login=lazy(()=>import( "../pages/Login"));
const Main=lazy(()=>import( "../pages/Main"));
const List=lazy(()=>import( "../pages/List"));
const menuElement={
    "Login":<Login/>,
    "Main":<Main/>,
    "List":<List/>
}
const menu=[{
    path:'/login',
    element:"Login",
    showMenu:false
},{
    path:'/home',
    icon:<AppstoreOutlined></AppstoreOutlined>,
    element:"Main",
    showMenu:false,
    children:[{
        path:'list',
        label:"列表",
        icon:<PieChartOutlined></PieChartOutlined>,
        element:"List",
        showMenu:true
    }],
},{
    path:'/',
    element:defaultPage()
},{
    path:'*',
    element:<Nopage></Nopage>
}];
function filterMenu(menu){
    for(let item of menu){
        if(item.children){
            filterMenu(item.children)
        }else{
            item.element=menuElement[item.element];
        }
        
    }
}
filterMenu(menu);
useRoutes(menu);

　　

这样就可以保证后台返回字符串之后前端可以正常访问组件了，希望有大神能给出更好的解决方案来！