背景介绍

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

性能拆解

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

1. 构建全局的layout界面
2. 可能实现路由跳转
3. 可能在全局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能够参考