admin管理员组文章数量:1634451
目录
需求分析
功能实现
1.构建全局layout页面并实现路由跳转
2.全局layout根据路由配置生成具体菜单
项目Gitee地址
需求分析
本文与上一篇文章利用umi.js 3.5+Dva.js 搭建React框架无缝连接,上文我们实现了React开发环境的基本搭建。
但是根据我们的使用经验,还有一个功能缺席:
全局菜单显示,点击跳转到不同的页面
实现效果如下所示:
功能实现
1.构建全局layout页面并实现路由跳转
UmiJs 约定式路由
src/文件夹下新建layouts文件夹及index.js文件。
修改index.js如下:
export default withRouter(({ children, location }) => {
return (
<div>
<div>
<Switch location={location}>{children.props.children}</Switch>
</div>
</div>
);
});
修改.umirc.ts文件如下:
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: { //设置 node_modules 目录下依赖文件的编译方式
type: 'none',
},
//umi 的路由基于 react-router@5 实现,配置和 react-router 基本一致
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',
},
],
},
],
fastRefresh: {}, //快速刷新(Fast Refresh),开发时可以保持组件状态,同时编辑提供即时反馈
ignoreMomentLocale: true, //忽略 moment 的 locale 文件,用于减少尺寸
hash: true, //配置是否让生成的文件包含 hash 后缀,通常用于增量发布和避免浏览器加载缓存
targets: { //配置需要兼容的浏览器最低版本,会自动引入 polyfill 和做语法转换
ie: 9,
},
dva: {
immer: true,
hmr: false,
},
});
综合以上两部分,我们可实现全局路由调整,UmiJs在调整时首先1载入 @layouts/index 组件,然后再调整到具体的路由载入另一个页面。
实现全局路由跳转之后,问题又来了——目前我们只能手动输入路由才能实现跳转,因此我们需在layout中加入一个菜单便于跳转。
2.全局layout根据路由配置生成具体菜单
此处菜单我们使用Antd的Menu组件实现。
如下图所示:
项目根目录下创建config文件夹,config文件夹下创建 router.config.js 文件,修改内容如下:
const routerConfig = [
{
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',
},
],
},
];
export default routerConfig;
根据路由配置信息,再结合Menu组件参数配置实现动态生成。
修改layouts/index.js文件如以下内容:
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.js';
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>
);
});
项目Gitee地址
umijs_dva_react_demo
以上,就是本次配置的全部内容~
版权声明:本文标题:Umi3.5配置全局路由及菜单 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729176747a1188814.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论