背景介绍

接上一篇《应用 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 能够参考