umi3.0|umi3.0 配置全局路由及菜单
背景介绍
接上一篇《使用umi.js 3.0搭建React开发框架》(查看),我们在文中实现了React开发环境的基本实现,但是在用umi3.0搭建React项目时通常需要如下的功能:一个全局的菜单,可以一直显示,点击后可以跳转到不同的页面。具体的实现效果如下图所示,本文就该问题做简单的介绍
文章图片
功能拆解
可以将以上的需求拆分成如下的几个功能
- 构建全局的layout界面
- 能够实现路由跳转
- 能够在全局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 ({children.props.children});
});
其中getMenu函数是构建菜单的具体实现函数。
【umi3.0|umi3.0 配置全局路由及菜单】具体的demo可以参考
推荐阅读
- Spring Boot 保护敏感配置的 4 种方法,让你的系统不再裸奔!!
- 详解在vue3中使用jsx的配置以及一些小问题
- C/C++|C/C++ 大型工程工具链搭建
- Python使用chrome配置selenium操作详解
- ASP.NET|ASP.NET CORE读取json格式配置文件
- Maven安装与配置——详细教程
- SAP|SAP CAP Fiori Elements 应用配置 UI 的两种方式以及自定义 index.html
- 解决Spring|解决Spring Security的权限配置不生效问题
- 修改计算机用户名文件,老司机教你win101909系统彻底更改用户名配置文件的方法步骤...
- Nodejs的安装与环境配置