背景介绍接上一篇文章《使用umi.js 3.0搭建React开发框架》（查看），我们在本文中实现了React开发环境的基本实现，但是在构建React时通常需要以下内容umi3.0项目功能：全局菜单，可以一直显示，点击后可以跳转到不同的页面。具体实现效果如下图所示。本文简单介绍一下这个问题。功能拆解可以将以上需求拆分成以下几个功能，搭建一个全局布局界面，可以实现路由跳转，可以基于全局布局中的路由。配置生成具体菜单实现步骤第一步：构建全局布局官方参考文档如上图所示在src/文件夹下创建layouts文件夹和index.js文件创建完成后输入如下代码：exportdefaultwithRouter(({children,location})=>{return(
{children.props.children}
);});而在。在umirc.ts中配置路由如下：[{path:'/',component:'@/layouts/index',routes:[{exact:true,path:'/Demo1',name:'Demo1',component:'@/pages/Demo1/index'，图标：'SettingOutlined'，}，{exact：true，路径：'/Demo2'，名称：'Demo2'，组件：'@/pages/Demo2/index'，图标：'AppstoreOutlined',},],},];结合这两部分，我们可以实现全局路由调整。umi.js在调整的时候，会先加载@/layouts/index组件，也就是我们刚刚定义的全局布局，然后再调整到特定的路由去加载另一个页面。实现全局路由跳转后，问题是我们想要路由跳转只能在浏览器上手动输入路由，所以需要在全局布局中添加一个菜单，方便我们跳转。Step2：根据路由配置构建菜单。这里的菜单是使用antd的Menu组件实现的。界面效果如下。我们采用的是根据路由配置信息和Menu组件的参数配置动态生成的方式。具体代码如下：importReact,{Fragment,useState}from'react';import{withRouter,Switch,history}from'umi';import{Menu}from'antd';import*asIconfrom'@ant-design/icons'；从'../../config/router.config'导入routerConfig；const{SubMenu}=Menu；constgetIcon=(iconName)=>{constres=React.createElement(Icon[iconName],{样式:{fontSize:'16px'},});returnres;};constgetSubMenu=(routesData)=>{routesData.map((item)=>{return
{item.name};});};constgetMenu=(routesData)=>{constmenuData=[];for(leti=0;i{getSubMenu(routesData[i].routes)},);}else{menuData.push({routesData[i].name},);}}returnmenuData;};constCreateMenu=()=>{const[levelOne]=routerConfig;const{routes}=levelOne;返回{getMenu(routes)};};exportdefaultwithRouter(({children,location})=>{const[current,setCurrent]=useState('');consthandleClick=(e)=>{history.push(e.key);setCurrent(e.key);};返回({CreateMenu()}{children.props.children}
);});其中getMenu函数是构建菜单的实体实现功能的具体demo可以参考
