umi3.0|umi3.0 配置全局路由及菜单 umi3.0配置全局路由及菜单

背景介绍接上一篇《使用umi.js 3.0搭建React开发框架》（查看），我们在文中实现了React开发环境的基本实现，但是在用umi3.0搭建React项目时通常需要如下的功能：一个全局的菜单，可以一直显示，点击后可以跳转到不同的页面。具体的实现效果如下图所示，本文就该问题做简单的介绍

文章图片

功能拆解可以将以上的需求拆分成如下的几个功能

构建全局的layout界面
能够实现路由跳转
能够在全局layout中根据路由配置生成具体的菜单

实现步骤 Step 1: 构建全局layout 官方参考文档

文章图片

在src/文件夹下按照上图所示建立layouts文件夹及index.js文件
建立完成后输入如下代码：

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

同时在.umirc.ts中做如下配置

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', }, ], }, ];

结合这两部分我们可以实现全局路由调整，umi.js在调整时首先载入@/layouts/index组件，即我们刚刚定义的全局的layout,然后再调整到具体的路由载入另一个页面。
实现了全局路由跳转后，问题在于我们要路由跳转只能手动在浏览器上输入路由，于是我们需要在全局layout中加入一个菜单方便我们跳转。
Step2: 根据路由配置构建菜单
此处的菜单使用antd 的Menu组件来实现，其界面效果如下

文章图片

我们根据路由配置信息结合Menu组件的参数配置使用动态生成的方式实现，具体代码如下：

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'; const { SubMenu } = Menu; const getIcon = (iconName) => { const res = React.createElement(Icon[iconName], { style: { fontSize: '16px' }, }); return res; }; const getSubMenu = (routesData) => { routesData.map((item) => { return {item.name}; }); }; const getMenu = (routesData) => { const menuData = https://www.it610.com/article/[]; for (let i = 0; i < routesData.length; i += 1) { if (Object.prototype.hasOwnProperty.call(routesData[i],'routes')) { menuData.push({getSubMenu(routesData[i].routes)} , ); } else { menuData.push( {routesData[i].name} , ); } } return menuData; }; const CreateMenu = () => { const [levelOne] = routerConfig; const { routes } = levelOne; return {getMenu(routes)}; }; export default withRouter(({ children, location }) => { const [current, setCurrent] = useState(''); const handleClick = (e) => { history.push(e.key); setCurrent(e.key); }; return ( {CreateMenu()} {children.props.children}); });

其中getMenu函数是构建菜单的具体实现函数。
【umi3.0|umi3.0 配置全局路由及菜单】具体的demo可以参考