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

目录

需求分析

功能实现

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

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

项目Gitee地址

---

需求分析

本文与上一篇文章利用umi.js 3.5+Dva.js 搭建React框架无缝连接，上文我们实现了React开发环境的基本搭建。

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

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

实现效果如下所示：

功能实现

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

UmiJs 约定式路由

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

 修改index.js如下：

export default withRouter(({ children, location }) => {
  
  return (
    <div>
      
      <div>
        <Switch location={location}>{children.props.children}</Switch>
      </div>
    </div>
  );
});

修改.umirc.ts文件如下：

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: { //设置 node_modules 目录下依赖文件的编译方式
    type: 'none',
  },
  //umi 的路由基于 react-router@5 实现，配置和 react-router 基本一致

  routes: [
    {
      path: '/',
      component: '@/layouts/index',
      routes: [
        {
          exact: true,
          path: '/Demo1',
          name: 'Demo1',
          component: '@/pages/Demo1/index',
          icon: 'SettingOutlined',
        },
        {
          exact: true,
          path: '/Demo2',
          name: 'Demo2',
          component: '@/pages/Demo2/index',
          icon: 'AppstoreOutlined',
        },
      ],
    },
  ],

  fastRefresh: {}, //快速刷新（Fast Refresh），开发时可以保持组件状态，同时编辑提供即时反馈
  ignoreMomentLocale: true, //忽略 moment 的 locale 文件，用于减少尺寸
  hash: true, //配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存
  targets: { //配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换
    ie: 9,
  },
  dva: {
    immer: true,
    hmr: false,
  },
});

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

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

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

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

如下图所示：

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

const routerConfig = [
    {
      path: '/',
      component: '@/layouts/index',
      routes: [
        {
          exact: true,
          path: '/Demo1',
          name: 'Demo1',
          component: '@/pages/Demo1/index',
          icon: 'SettingOutlined',
        },
        {
          exact: true,
          path: '/Demo2',
          name: 'Demo2',
          component: '@/pages/Demo2/index',
          icon: 'AppstoreOutlined',
        },
      ],
    },
  ];
  export default routerConfig;
  

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

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

import React, { Fragment, useState } from 'react';
import { withRouter, Switch, history } from 'umi';
import { Menu } from 'antd';
import * as Icon from '@ant-design/icons';
import routerConfig from '../../config/router.config.js';

const { SubMenu } = Menu;

const getIcon = (iconName) => {
  const res = React.createElement(Icon[iconName], {
    style: { fontSize: '16px' },
  });
  return res;
};

const getSubMenu = (routesData) => {
  routesData.map((item) => {
    return <Menu.Item key={item.path}>{item.name}</Menu.Item>;
  });
};
// 实现菜单构建函数
const getMenu = (routesData) => {
  const menuData = [];
  for (let i = 0; i < routesData.length; i += 1) {
    if (Object.prototype.hasOwnProperty.call(routesData[i], 'routes')) {
      menuData.push(
        <SubMenu
          key={routesData[i].path}
          title={routesData[i].name}
          icon={getIcon(routesData[i].icon)}
        >
          {getSubMenu(routesData[i].routes)}
        </SubMenu>,
      );
    } else {
      menuData.push(
        <Menu.Item key={routesData[i].path} icon={getIcon(routesData[i].icon)}>
          {routesData[i].name}
        </Menu.Item>,
      );
    }
  }
  return menuData;
};
const CreateMenu = () => {
  const [levelOne] = routerConfig;
  const { routes } = levelOne;
  return <Fragment>{getMenu(routes)}</Fragment>;
};

export default withRouter(({ children, location }) => {
  const [current, setCurrent] = useState('');
  const handleClick = (e) => {
    history.push(e.key);
    setCurrent(e.key);
  };

  return (
    <div>
      <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal">
        {CreateMenu()}
      </Menu>
      <div>
        <Switch location={location}>{children.props.children}</Switch>
      </div>
    </div>
  );
});

项目Gitee地址

umijs_dva_react_demo

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