被窝暖暖嘻嘻嘻 react后台管理项目-路由-menu.js

import React from 'react';

import Loadable from 'react-loadable';

import { Switch, Redirect } from 'react-router-dom';

import PrivateRoute from '@/components/PrivateRoute';

import Loading from '@/components/Loading';

function myLoadable(fn) {

    return Loadable({

        loader: fn,

        loading: Loading,

    });

}

let Home = myLoadable(() => import('@/pages/Home'));

let ButtonDemo = myLoadable(() => import('@/pages/Basic/ButtonDemo'));

let IconDemo = myLoadable(() => import('@/pages/Basic/IconDemo'));

let DropdownDemo = myLoadable(() => import('@/pages/Navigation/DropdownDemo'));

let MenuDemo = myLoadable(() => import('@/pages/Navigation/MenuDemo'));

let StepsDemo = myLoadable(() => import('@/pages/Navigation/StepsDemo'));

let BasicForm = myLoadable(() => import('@/pages/Entry/Form/BasicForm'));

let UploadDemo = myLoadable(() => import('@/pages/Entry/UploadDemo'));

let TableDemo = myLoadable(() => import('@/pages/Display/TableDemo'));

let CarouselDemo = myLoadable(() => import('@/pages/Display/CarouselDemo'));

let CollapseDemo = myLoadable(() => import('@/pages/Display/CollapseDemo'));

let Page403 = myLoadable(() => import('@/pages/Other/Page403'));

let Page404 = myLoadable(() => import('@/pages/Other/Page404'));

let Page500 = myLoadable(() => import('@/pages/Other/Page500'));

let About = myLoadable(() => import('@/pages/About'));

export const menus = [

    {

        title: '首页',

        icon: 'home',

        key: '/home',

        component: Home

    },

    {

        title: '基本组件',

        icon: 'laptop',

        key: '/home/basic',

        subs: [

            { key: '/home/basic/button', title: '按钮', component: ButtonDemo },

            { key: '/home/basic/icon', title: '图标', component: IconDemo },

        ]

    },

    {

        title: '导航组件',

        icon: 'bars',

        key: '/home/navigation',

        subs: [

            { key: '/home/navigation/dropdown', title: '下拉菜单', component: DropdownDemo },

            { key: '/home/navigation/menu', title: '导航菜单', component: MenuDemo },

            { key: '/home/navigation/steps', title: '步骤条', component: StepsDemo },

        ]

    },

    {

        title: '输入组件',

        icon: 'edit',

        key: '/home/entry',

        subs: [

            {

                key: '/home/entry/form',

                title: '表单',

                subs: [

                    { key: '/home/entry/form/basic-form', title: '基础表单', component: BasicForm }

                ]

            },

            { key: '/home/entry/upload', title: '上传', component: UploadDemo },

        ]

    },

    {

        title: '显示组件',

        icon: 'desktop',

        key: '/home/display',

        subs: [

            { key: '/home/display/table', title: '表格', component: TableDemo },

            { key: '/home/display/carousel', title: '轮播图', component: CarouselDemo },

            { key: '/home/display/collapse', title: '折叠面板', component: CollapseDemo }

        ]

    },

    {

        title: '其它',

        icon: 'bulb',

        key: '/home/other',

        subs: [

            { key: '/home/other/403', title: '403', component: Page403 },

            { key: '/home/other/404', title: '404', component: Page404 },

            { key: '/home/other/500', title: '500', component: Page500 },

        ]

    },

    {

        title: '关于',

        icon: 'info-circle-o',

        key: '/about',

        component: About

    }

];

const MenuRoutes = () => {

    return (

        <Switch>

            {generateRoutes(menus)}

            <Redirect exact from="/" to="/home" />

        </Switch>

    );

};

function generateRoutes(data, result = []) {

    data.forEach((item) => {

        if (item.component) {

            result.push(<PrivateRoute exact path={item.key} component={item.component} />);

        }

        if (item.subs) {

            generateRoutes(item.subs, result);

        }

    });

    return result;

}

export default MenuRoutes;