Solve the navigation route recursion problem through map

Problem description

How do I convert an object tree into a routing navigation, as shown in the figure below

The data source

const menuList = [
    {
        title: 'home'.// Menu title name
        key: '/home'.// The corresponding path
        icon: <HomeOutlined />.// Icon name
    },
    {
        title: 'goods'.key: '/products'.icon: <AppstoreOutlined />,
        children: [ // Submenu list
            {
                title: 'Category Management'.key: '/category'.icon: <DatabaseOutlined />
            },
            {
                title: 'Merchandise Management'.key: '/product'.icon: <ToolOutlined />]}, {},title: 'User Management'.key: '/user'.icon: <UserOutlined />
    },
    {
        title: 'Role Management'.key: '/role'.icon: <SafetyOutlined />}, {title: 'Graphic chart'.key: '/charts'.icon: <AreaChartOutlined />,
        children: [
            {
                title: 'Bar chart'.key: '/charts/bar'.icon: <BarChartOutlined />
            },
            {
                title: 'Line chart'.key: '/charts/line'.icon: <LineChartOutlined />
            },
            {
                title: 'pie'.key: '/charts/pie'.icon: <PieChartOutlined />}},],]Copy the code

Recursive operation through map

getTreeNodes = (menuList) = > {
        return menuList.map(item= > {
            if(! item.children) {return {title: item.title, key: item.key}
            } else {
                return {title: item.title, key: item.key, children: this.getTreeNodes(item.children)}
            }
        })
    }
Copy the code