前言:学习目标实现点击登录按钮,直接进入后台布局页面,类似下面antd官网文档展示效果

ant.design访问

https://ant-design.gitee.io/components/menu-cn/

速度比较快

1、最开始想的很简单,增加一个页面,修改一个路由即可,实际操作中掉了几次坑,花了很长时间

首先修改路由如下,注意:如果写后面,比如

的话会报

要放前面如下

或者增加exact

注意,嵌套路由父路由不能使用exact:true

这种无法访问

2、修改BasicLayout内容如下

import { Layout, Menu, Icon } from 'antd';
import React from 'react';
import ReactDOM from 'react-dom'; const { Header, Sider, Content } = Layout; class SiderDemo extends React.Component {
state = {
collapsed: false,
}; toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
}; render() {
return (
<Layout>
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1">
<Icon type="user" />
<span>nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span>nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span>nav 3</span>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }}>
<Icon
className="trigger"
type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggle}
/>
</Header>
<Content
style={{
margin: '24px 16px',
padding: 24,
background: '#fff',
minHeight: 800,
}}
>
Content
</Content>
</Layout>
</Layout>
);
}
}
export default SiderDemo;

注意,最后一行不能写为

ReactDOM.render(<SiderDemo />, mountNode);

或者

export default <SiderDemo/>

上面编译报错,下面运行报错:

react-native Element type is invalid: expected a string (for built-in components).....

3、为了方便测试运行效果,修改代码如下

4、运行界面如下

4.1登录页面

4.2跳转后进入mainfrm页面

5、目前项目结构

6、下面是实现动态路由的一篇文章
https://blog.csdn.net/duola8789/article/details/90169410

AntDesign(React)学习-5 路由及使用Layout布局的更多相关文章

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

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

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

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

  3. AntDesign(React)学习-14 使用UMI提供的antd模板

    1.UMI提供了可视化antd模板,可以直接添加到项目中修改用 比如将个人中心添加到项目中 2.选择个人中心,确定 3.成功 4.打开项目 5.Route文件也自动添加 根路由有exact:true后 ...

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

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

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

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

  6. AntDesign(React)学习-8 Menu使用 切换框架页内容页面

    本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看 1.在pages下添加两个组件,User,UserRole import React from 'rea ...

  7. AntDesign(React)学习-4 登录页面提交数据简单实现

    github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...

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

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

  9. AntDesign(React)学习-15 组件定义、connect、interface

    虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...

随机推荐

  1. 转载:字符编码简介 ASCII UTF-8 ISO8859-1

    字符编码简介 ASCII UTF-8 ISO8859-1 博客分类: 电脑综合知识 XP数据结构Windows  计算机中的一切都是以数字来表示的,字符同样如此.字符编码就是将字符集编码成为数字序列, ...

  2. 【干货】Python基础——列表

    1.列表的创建 列表是多个.有序.可重复的元素集合,数据包装在“[]”里,列表中的元素可以是任何类型,甚至可以是一个列表.创建列表有两种方法: A 对于规模比较小的列表可以直接定义和赋值,列表可以嵌套 ...

  3. IDEA 代码量统计(Statistic)

    IDEA 代码量统计(Statistic) 1.1 前言 项目到了一定阶段,都会想要看看项目的代码量情况,这里主要使用插件Statistic进行代码统计查看. 1.2 安装插件步骤 找到插件市场入口并 ...

  4. LINUX下EFIBOOTMGR的使用,删除UEFI主板多余启动项和添加启动项

    用uefi装了几次次archlinux,搞的uefi启动选项下多出来好多启动项..这东西重格硬盘也是不好用的.发现以下方法可以解决. efibootmgr   //显示efi的启动项 删除一个引导项 ...

  5. 一次线上nohup.out日志丢失的问题

    今天有小伙伴求助,线上一个应用的nohup.out日志不更新了,但进程还是正常的.此时需要查看这个日志排查一些问题,这可怎么办呢? nohup.out文件的更新时间停留在了昨天9点36,日志也刚好打到 ...

  6. VM虚拟机扩展Ubuntu磁盘空间

    VM虚拟机扩展Ubuntu磁盘空间 1 环境 VMware版本号:15.0.2 build-10952284 系统:Ubuntu18.04 Ubuntu只挂载一个硬盘,无分区 /dev/sda1 2 ...

  7. 洛谷P4525 【模板】自适应辛普森法1与2

    洛谷P4525 [模板]自适应辛普森法1 与P4526[模板]自适应辛普森法2 P4525洛谷传送门 P4525题目描述 计算积分 结果保留至小数点后6位. 数据保证计算过程中分母不为0且积分能够收敛 ...

  8. header.vue 调用变量,别的组件导入引用,组件方法事例实例

    <template> <div id="header"> <!-- 调用变量 --> <h1>{{ msg }}</h1> ...

  9. antd-design

    1. 有mock 时候进度条展示不正常

  10. Perl-统计某电路面积、功耗占比(NVDIA2019笔试)

    1.perl脚本 open IN, "<", "data.txt" or die "The file does not exist!" ...