react-router-dom v6版本如何支持动态拼接地址加载？

Question

router.ts

import React, { lazy } from 'react';
import UserLayout from "@/layout/UserLayout"
import BasicLayout from "@/layout/BasicLayout"

export type routerInterType = {
    name?: string,
    path?: string,
    exact?: boolean,
    index?: boolean,
    isLazy?: boolean,
    element?: any, // 渲染的组件
    caseSensitive?: boolean,
    show?: boolean, // 是否展示在菜单 true表示显示
    children?: routerInterType[]
}

const _router: routerInterType[] = [
    {
        name: "用户管理",
        path: "/user",
        element: UserLayout,
        show: false,
        children: [
            {
                name: "注册",
                path: "/user/register",
                element: lazy(() => import("@/pages/user/register"))
            },
            {
                name: "修改密码",
                path: "/user/changePassword",
                element: lazy(() => import("@/pages/user/changePassword"))
            },

            {
                name: "登录",
                path: "/user/*",
                index: true,
                element: "../pages/user/login"
            },
        ]
    },
    {
        path: "/home",
        name: "主页",
        element: BasicLayout,
        show: true
    },
    {
        name: "404",
        path: "*",
        show: false,
        element: "@/layout/UserLayout",
    }
]

const generateRouter = (routers: routerInterType[]): routerInterType[] => {
    return routers.map((item: routerInterType) => {
        
        if (typeof item.element === "string") {
            item.element = lazy(() => require(item.element))
        }
        else {
            item.element = React.createElement(item.element);
        }
        if (item.children) {
            item.children = generateRouter(item.children);
        }
        return item
    })
}

const routers = generateRouter(_router)


export {
    routers,
    generateRouter,
}

app.tsx

import React, { FC, Provider } from 'react';
import { BrowserRouter, useRoutes, Route } from "react-router-dom"
import { routers, } from "@/router"
import "@/easystory"
import './App.less';
import Nprogress from "@/components/nprogress"

const App: FC = () => {
    // useRoutes会自动序列化routers的tree结构
    console.log(routers)
    const UseRoutesHook = () => useRoutes(routers)
    return <BrowserRouter>
        <React.Suspense fallback={<Nprogress></Nprogress>}>
            <UseRoutesHook></UseRoutesHook>
        </React.Suspense>
    </BrowserRouter>
};

export default App;

如router.js所示，在转换函数中使用lazy(()=>import('xxx'))就无法使用了控制台报错
看代码该路径的模块已经被createElement,但是进入到登录的路由时却提示cannot find module，有碰到类似的错误的吗。
app.tsx打印的路由结构