Umi3.5配置全局路由和菜单

目录

需求分析

功能实现

1.构建全局layout页面并实现路由跳转

2.全局layout根据路由配置生成具体菜单

项目Gitee地址

需求分析

但是根据我们的使用经验，还有一个功能缺席：

全局菜单显示，点击跳转到不同的页面

实现效果如下所示：

功能实现

1.构建全局layout页面并实现路由跳转

UmiJs 约定式路由

src/文件夹下新建layouts文件夹及index.js文件。

 修改index.js如下：

1.  
   export default withRouter(({ children, location }) => {
2.  
    
3.  
   return (
4.  
   <div>
5.  
    
6.  
   <div>
7.  
   <Switch location={location}>{children.props.children}</Switch>
8.  
   </div>
9.  
   </div>
10.  
    );
11.  
    });

修改.umirc.ts文件如下：

1.  
   import { defineConfig } from 'umi';
2.  
    
3.  
   export default defineConfig({
4.  
   nodeModulesTransform: { //设置 node_modules 目录下依赖文件的编译方式
5.  
   type: 'none',
6.  
   },
7.  
   //umi 的路由基于 react-router@5 实现，配置和 react-router 基本一致
8.  
    
9.  
   routes: [
10.  
    {
11.  
    path: '/',
12.  
    component: '@/layouts/index',
13.  
    routes: [
14.  
    {
15.  
    exact: true,
16.  
    path: '/Demo1',
17.  
    name: 'Demo1',
18.  
    component: '@/pages/Demo1/index',
19.  
    icon: 'SettingOutlined',
20.  
    },
21.  
    {
22.  
    exact: true,
23.  
    path: '/Demo2',
24.  
    name: 'Demo2',
25.  
    component: '@/pages/Demo2/index',
26.  
    icon: 'AppstoreOutlined',
27.  
    },
28.  
    ],
29.  
    },
30.  
    ],
31.  
     
32.  
    fastRefresh: {}, //快速刷新（Fast Refresh），开发时可以保持组件状态，同时编辑提供即时反馈
33.  
    ignoreMomentLocale: true, //忽略 moment 的 locale 文件，用于减少尺寸
34.  
    hash: true, //配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存
35.  
    targets: { //配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换
36.  
    ie: 9,
37.  
    },
38.  
    dva: {
39.  
    immer: true,
40.  
    hmr: false,
41.  
    },
42.  
    });

综合以上两部分，我们可实现全局路由调整，UmiJs在调整时首先1载入 @layouts/index 组件，然后再调整到具体的路由载入另一个页面。

实现全局路由跳转之后，问题又来了——目前我们只能手动输入路由才能实现跳转，因此我们需在layout中加入一个菜单便于跳转。

2.全局layout根据路由配置生成具体菜单

此处菜单我们使用Antd的Menu组件实现。

如下图所示：

项目根目录下创建config文件夹，config文件夹下创建 router.config.js 文件，修改内容如下：

1.  
   const routerConfig = [
2.  
   {
3.  
   path: '/',
4.  
   component: '@/layouts/index',
5.  
   routes: [
6.  
   {
7.  
   exact: true,
8.  
   path: '/Demo1',
9.  
   name: 'Demo1',
10.  
    component: '@/pages/Demo1/index',
11.  
    icon: 'SettingOutlined',
12.  
    },
13.  
    {
14.  
    exact: true,
15.  
    path: '/Demo2',
16.  
    name: 'Demo2',
17.  
    component: '@/pages/Demo2/index',
18.  
    icon: 'AppstoreOutlined',
19.  
    },
20.  
    ],
21.  
    },
22.  
    ];
23.  
    export default routerConfig;

根据路由配置信息，再结合Menu组件参数配置实现动态生成。

修改layouts/index.js文件如以下内容：

1.  
   import React, { Fragment, useState } from 'react';
2.  
   import { withRouter, Switch, history } from 'umi';
3.  
   import { Menu } from 'antd';
4.  
   import * as Icon from '@ant-design/icons';
5.  
   import routerConfig from '../../config/router.config.js';
6.  
    
7.  
   const { SubMenu } = Menu;
8.  
    
9.  
   const getIcon = (iconName) => {
10.  
    const res = React.createElement(Icon[iconName], {
11.  
    style: { fontSize: '16px' },
12.  
    });
13.  
    return res;
14.  
    };
15.  
     
16.  
    const getSubMenu = (routesData) => {
17.  
    routesData.map((item) => {
18.  
    return <Menu.Item key={item.path}>{item.name}</Menu.Item>;
19.  
    });
20.  
    };
21.  
    // 实现菜单构建函数
22.  
    const getMenu = (routesData) => {
23.  
    const menuData = [];
24.  
    for (let i = 0; i < routesData.length; i = 1) {
25.  
    if (Object.prototype.hasOwnProperty.call(routesData[i], 'routes')) {
26.  
    menuData.push(
27.  
    <SubMenu
28.  
    key={routesData[i].path}
29.  
    title={routesData[i].name}
30.  
    icon={getIcon(routesData[i].icon)}
31.  
    >
32.  
    {getSubMenu(routesData[i].routes)}
33.  
    </SubMenu>,
34.  
    );
35.  
    } else {
36.  
    menuData.push(
37.  
    <Menu.Item key={routesData[i].path} icon={getIcon(routesData[i].icon)}>
38.  
    {routesData[i].name}
39.  
    </Menu.Item>,
40.  
    );
41.  
    }
42.  
    }
43.  
    return menuData;
44.  
    };
45.  
    const CreateMenu = () => {
46.  
    const [levelOne] = routerConfig;
47.  
    const { routes } = levelOne;
48.  
    return <Fragment>{getMenu(routes)}</Fragment>;
49.  
    };
50.  
     
51.  
    export default withRouter(({ children, location }) => {
52.  
    const [current, setCurrent] = useState('');
53.  
    const handleClick = (e) => {
54.  
    history.push(e.key);
55.  
    setCurrent(e.key);
56.  
    };
57.  
     
58.  
    return (
59.  
    <div>
60.  
    <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal">
61.  
    {CreateMenu()}
62.  
    </Menu>
63.  
    <div>
64.  
    <Switch location={location}>{children.props.children}</Switch>
65.  
    </div>
66.  
    </div>
67.  
    );
68.  
    });

项目Gitee地址

umijs_dva_react_demo

以上，就是本次配置的全部内容~

这篇好文章是转载于：学新通技术网