本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看

1、在pages下添加两个组件,User,UserRole

import React from 'react';
class User extends React.Component {
render() {
return (
<div>用户管理</div>
);
}
}
export default User;
import React from 'react';
class UserRole extends React.Component {
render() {
return (
<div>角色管理</div>
);
}
}
export default UserRole;

2、修改umirc.ts routes部分如下

const config: IConfig =  {
treeShaking: true,
routes: [
{
path: '/mainfrm',
component: '../layouts/BasicLayout',
routes: [
{ path: '/mainfrm', component: '../pages/User' },
{ path: '/mainfrm/user', component: '../pages/User' },
{ path: '/mainfrm/userrole', component: '../pages/UserRole' },
]
},
{
path: '/',
component: '../layouts/index',
routes: [
{ path: '/', component: '../pages/index' }
]
}
],

3、修改leftmenutree中state代码为

class LeftMenuTree extends React.Component {
state={list:[{"id":0,"title":"首页","url":"/","children":[]},{"id":1,"title":"权限配置","parentid":0,"children":[{"id":2,"title":"用户管理","url":"/mainfrm/user","parentid":1,"children":[]},{"id":3,"title":"角色管理","url":"/mainfrm/userrole","parentid":1,"children":[]}]}]};

4、运行正常

AntDesign(React)学习-8 Menu使用 切换框架页内容页面的更多相关文章

  1. AntDesign(React)学习-6 Menu展示数据

    1.官方文档请查看https://ant.design/components/menu-cn/antPro自带的菜单功能很强大,但是太复杂了,感觉大部分功能都用不上,下面实现一个简单从后台动态获取菜单 ...

  2. AntDesign(React)学习-7 Menu添加事件

    今天花了大半天时间从老家回到工作地,路上因为肺炎封堵挺厉害,希望国家挺过这个难关,要不大家都失业可就惨了,上一篇做了一个展示数据的demo,这一篇研究antd Menu item点击事件 1.还是先看 ...

  3. AntDesign(React)学习-1 创建环境

    目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...

  4. 微信小程序学习笔记(二)--框架-全局及页面配置

    描述和功能 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 响应的数 ...

  5. AntDesign(React)学习-5 路由及使用Layout布局

    前言:学习目标实现点击登录按钮,直接进入后台布局页面,类似下面antd官网文档展示效果 ant.design访问 https://ant-design.gitee.io/components/menu ...

  6. AntDesign(React)学习-12 使用Table

    AntDesign(Vue)版的Table中使用图片https://www.cnblogs.com/zhaogaojian/p/11119762.html 之前在使用VUE版Table时,使用大图片时 ...

  7. AntDesign(React)学习-3 React基础

    前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...

  8. AntDesign(React)学习-2 第一个页面

    1.前面创建了第一个项目jgdemo,结构如下,使用TypeScript. 2.yarn start启动项目 3.点击GettingStarted是umi的官方网站 https://umijs.org ...

  9. AntDesign(React)学习-9 Dva model reducer实践

    今天肺炎增长数字依然吓人,感觉穿越到丧失片里了. 本节开始学习dva model使用,官网的讲解太文档化,对新手实践不太友好,自己简化了一个最简单的演示代码. 1.在src,models文件夹下创建u ...

随机推荐

  1. MTK迁移Oracle单库

    MTK迁移Oracle单库 一. Mtk安装 1.1     安装jdk 要求jdk版本在1.7以上 安装完jdk后将需要的数据库jdbc驱动拷贝到$JAVA_HOME/jre/lib/ext  目录 ...

  2. C#实现的Table的Merge,以及实现Table的Copy和Clone

    C#实现的对两个Table进行Merge,两表必须存在至少一个公共栏位作为连接项,否则连接就失去了意义.如下是对两个table进行Merge的详细代码: private void button1_Cl ...

  3. Dalvik虚拟机和Art虚拟机

    Dalvik虚拟机 DVM是Dalvik Virtual Machine的缩写,是Android4.4及以前使用的虚拟机,所有android程序都运行在android系统进程里,每个进程对应着一个Da ...

  4. 《手把手教你构建自己的 Linux 系统》学习笔记(6)

    目录 /dev 目录是干什么的? /proc 和 /sys 目录是干什么的? udev 这个软件是干什么用的? 目录映射是临时性的,还是永久性的? 命令行里大括号 "{}" 的作用 ...

  5. NIO学习笔记,从Linux IO演化模型到Netty—— Java NIO零拷贝

    同样只是大致上的认识. 其中,当使用transferFrom,transferTo的时候用的sendfile(). 如果系统内核不支持 sendfile,进一步执行 transferToTrusted ...

  6. 关于对 softirq、work_queue、tasklet 学习后的一点总结

    本文基于linux版本:4.14.111 简单的总结下 softirq.work_queue.tasklet 三种中断下半部的工作原理及区别,并附上三种形式的简单实例. 一.运行原理① softirq ...

  7. vue history模式 ios微信分享 踩过的坑

    背景:教育项目,整体依赖于微信环境,涉及到微信分享.微信二次分享 问题:vue使用history模式在iso微信下分享设置出错(签名认证错误.分享设置失败) 问题发现路径 1.按照微信公众号官方文档设 ...

  8. 剑指offer-面试题53_3-数组中数值和下标相等的元素-二分查找

    /* 题目: 求单调递增数组中,数值与下标相等的任意数字. */ /* 思路: 二分法. */ #include<iostream> #include<cstring> #in ...

  9. C++ 与String有关的函数!!!

    String函数 1.字符串的输入 (1) string s; cin >> s;//碰到空格等分隔符会终端输入 /* string s; cin >> s;//如果输入 he ...

  10. WebGL_0004:带贴图的材质透明效果

    在材质中: "blendType": 2,