前后端接口设计与配置中心系统＜二十七＞-------前端-管理后台设计实现2【导航架构模块设计与实现、基于react-router-dom实现路由模块、网络模块封装与service层实现】

webor2006

于 2022-06-29 21:49:20 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： android架构综合实操文章标签：大数据 Android架构

本文链接：https://blog.youkuaiyun.com/webor2006/article/details/125530191

android架构综合实操专栏收录该内容

84 篇文章 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了前端管理后台的导航架构模块设计与实现，包括基于react-router-dom的路由模块配置，以及网络模块的封装和服务层实现。详细讲述了Menu元素的定义、路由组件的配置、菜单点击后的页面跳转逻辑，以及get请求的封装和跨域问题的解决。

导航架构模块设计与实现：

在上一次前后端接口设计与配置中心系统<二十七>-------前端-管理后台设计实现1【基于create-react-app搭建web工程、整合antd与less并搭建具有Ant Design风格的页面、页面结构设计与框架搭建】搭建了前端管理后台的基本框架，接着往下继续开撸，接下来则来搭建一下左侧菜单模块了。

定义Menu元素：

import React from 'react';
import './DrawerMenu.less';
import {Layout, Menu} from 'antd';

const {Sider} = Layout;
const {SubMenu} = Menu;
const MENUS = {
    home: {
        key: 'home',
        title: '首页',
    },
    user: {
        key: 'user',
        title: '用户管理',
    },
    category: {
        key: 'category',
        title: '类别列表',
    },
    addCategory: {
        key