AntDesign(React)学习-5 路由及使用Layout布局
前言:学习目标实现点击登录按钮,直接进入后台布局页面,类似下面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布局的更多相关文章
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- AntDesign(React)学习-2 第一个页面
1.前面创建了第一个项目jgdemo,结构如下,使用TypeScript. 2.yarn start启动项目 3.点击GettingStarted是umi的官方网站 https://umijs.org ...
- AntDesign(React)学习-14 使用UMI提供的antd模板
1.UMI提供了可视化antd模板,可以直接添加到项目中修改用 比如将个人中心添加到项目中 2.选择个人中心,确定 3.成功 4.打开项目 5.Route文件也自动添加 根路由有exact:true后 ...
- AntDesign(React)学习-12 使用Table
AntDesign(Vue)版的Table中使用图片https://www.cnblogs.com/zhaogaojian/p/11119762.html 之前在使用VUE版Table时,使用大图片时 ...
- AntDesign(React)学习-9 Dva model reducer实践
今天肺炎增长数字依然吓人,感觉穿越到丧失片里了. 本节开始学习dva model使用,官网的讲解太文档化,对新手实践不太友好,自己简化了一个最简单的演示代码. 1.在src,models文件夹下创建u ...
- AntDesign(React)学习-8 Menu使用 切换框架页内容页面
本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看 1.在pages下添加两个组件,User,UserRole import React from 'rea ...
- AntDesign(React)学习-4 登录页面提交数据简单实现
github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...
- AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
- AntDesign(React)学习-15 组件定义、connect、interface
虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...
随机推荐
- 转载:字符编码简介 ASCII UTF-8 ISO8859-1
字符编码简介 ASCII UTF-8 ISO8859-1 博客分类: 电脑综合知识 XP数据结构Windows 计算机中的一切都是以数字来表示的,字符同样如此.字符编码就是将字符集编码成为数字序列, ...
- 【干货】Python基础——列表
1.列表的创建 列表是多个.有序.可重复的元素集合,数据包装在“[]”里,列表中的元素可以是任何类型,甚至可以是一个列表.创建列表有两种方法: A 对于规模比较小的列表可以直接定义和赋值,列表可以嵌套 ...
- IDEA 代码量统计(Statistic)
IDEA 代码量统计(Statistic) 1.1 前言 项目到了一定阶段,都会想要看看项目的代码量情况,这里主要使用插件Statistic进行代码统计查看. 1.2 安装插件步骤 找到插件市场入口并 ...
- LINUX下EFIBOOTMGR的使用,删除UEFI主板多余启动项和添加启动项
用uefi装了几次次archlinux,搞的uefi启动选项下多出来好多启动项..这东西重格硬盘也是不好用的.发现以下方法可以解决. efibootmgr //显示efi的启动项 删除一个引导项 ...
- 一次线上nohup.out日志丢失的问题
今天有小伙伴求助,线上一个应用的nohup.out日志不更新了,但进程还是正常的.此时需要查看这个日志排查一些问题,这可怎么办呢? nohup.out文件的更新时间停留在了昨天9点36,日志也刚好打到 ...
- VM虚拟机扩展Ubuntu磁盘空间
VM虚拟机扩展Ubuntu磁盘空间 1 环境 VMware版本号:15.0.2 build-10952284 系统:Ubuntu18.04 Ubuntu只挂载一个硬盘,无分区 /dev/sda1 2 ...
- 洛谷P4525 【模板】自适应辛普森法1与2
洛谷P4525 [模板]自适应辛普森法1 与P4526[模板]自适应辛普森法2 P4525洛谷传送门 P4525题目描述 计算积分 结果保留至小数点后6位. 数据保证计算过程中分母不为0且积分能够收敛 ...
- header.vue 调用变量,别的组件导入引用,组件方法事例实例
<template> <div id="header"> <!-- 调用变量 --> <h1>{{ msg }}</h1> ...
- antd-design
1. 有mock 时候进度条展示不正常
- Perl-统计某电路面积、功耗占比(NVDIA2019笔试)
1.perl脚本 open IN, "<", "data.txt" or die "The file does not exist!" ...