React中使用Ant Design 以Menu导航菜单形式展示Tree树形结构

目的
项目分为全局路由如登录页面，404页面之类的和由侧边栏menu控制跳转的子路由页面主要是业务页面。页面子页面放入views文件夹下，将自动读入注册成route，配置文件主要用于生成树形menu侧边栏。建议配合项目结构进行阅读效果更佳

效果

项目结构

子页面配置文件
将根据以下配置文件生成树形menu导航栏

export default [
    {
   
        name: '测试页面',
        path: '/test',
        meta: {
   
            auth: false
        }
    },
    {
   
        name: '页面1',
        path: '/page1',
        meta: {
   
            auth: false
        }
    },
    {
   
        name: '页面2',
        path: '/page2',
        meta: {
   
            auth: false
        }
    },
    {
   
        name: '页面3',
        path: '/page3',
        meta: {
   
            auth: false
        },
        children:[
            {
   
                name: '页面5',
                path: '/page5',
                meta: {
   
                    auth: false
                },
                children:[
                    {
   
                        name: '页面6',
                        path: '/page6',
                        meta: {
   
                            auth: false
                        }
                    },
                ]
            },
           
        ]
    },
]

读取子页面文件夹注册route

import {
   
    Switch,
    Route,
} from "react-router-dom";
import React from