背景介绍

接上一篇《应用umi.js 3.0搭建React开发框架》（查看），咱们在文中实现了React开发环境的根本实现，然而在用umi3.0搭建React我的项目时通常须要如下的性能：一个全局的菜单，能够始终显示，点击后能够跳转到不同的页面。具体的实现成果如下图所示，本文就该问题做简略的介绍

性能拆解

能够将以上的需要拆分成如下的几个性能

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

实现步骤

Step 1: 构建全局layout 官网参考文档

在src/文件夹下依照上图所示建设layouts文件夹及index.js文件

建设实现后输出如下代码：

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

同时在.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 <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>  );});

其中getMenu函数是构建菜单的具体实现函数。

具体的demo能够参考