详情请点阅读全文
一、admin页面布局及路由创建
0)cmd批量创建目录及子目录
1 | //创建各个目录,及charts和子目录bar |
目录结构
1 | │ admin.jsx |
0.2 写基础文件,分别如下
1 | F:admin-client\src\pages\admin>tree /f |
1)用antd进行页面布局src/pages/admin/admin.jsx
1 | import React,{Component} from 'react' |
2)分离出1步左侧组件src/pages/admin/left/index.jsx
1 | import React,{Component} from 'react' |
2.2 left/left.less
1 | .left { |
3)分离出1步头部组件src/pages/admin/header/index.jsx
1 | import React,{Component} from 'react' |
3.2 /header.less
1 | .header{ |
4)写admin.jsx的路由
【1】引入路由组件
【2】以下8条为引入需要配置路由的页面
【3】路由配置在要显示的位置,即内容里
【3.2】如果以上都不匹配跳转到home页
1 | import React,{Component} from 'react' |
5)完善左侧导航路径src/page/admin/left/index.jsx
1 | import React,{Component} from 'react' |
5.2效果:http://localhost:3000/home
6)完善5步:动态加载左导航src/config/menuconfig.js配置文件
src/pages/admin/left/index.js
【1】根据配置文件自动写入左侧导航到页面
【2】调用自动写左导航函数,自动写入到此处
1 | import React,{Component} from 'react' |
效果同上,菜单会自动根据config内的menuConfig.js加载。
6.2附件src/config/menuconfig.js
1 | const menuList = [ |
css样式陷阱及解决
随便刷新一个类似多级页面,http://localhost:3000/charts/bar
样式会变成这样(页面不能全屏),且控制台报错:
1 | Refused to apply style from |
解决把之前写在public目录下的index.html样式的相对引用改成绝对引用:
【1】重置样式处改成绝对路径:<link rel="stylesheet" href="/css/reset.css" />
原:
1 |
|
7)6步动态加载左导航函数用reduce()写
1 | /* |
效果同6
8)路由的withRouter高阶函数的使用,左导航完善:点在一个页面刷新不能显示选中状态
在控制台点开之前安装的react组件,搜索随便一个带路由的组件选中查看其带有的属性:this.props.location.pathname,而leftNav组件没有这些,因此无法确定选定状态
通过router的withRouter()高阶函数让leftNav具有路由属性,从而能确定当前页面位置,让导航具有选定状态:
src/pages/admin/left/index.jsx
【1】withRouter:高阶函数,用于把非路由组件包装成路由组件
【2】用withRouter高阶组件:
- 包装非路由组件, 返回一个新的组件
- 新的组件向非路由组件传递3个属性: history/location/match
【3】获取当前页面的路径
【4】选中路径为3步获取的路径,从而确定选中状态,刷新后也会有选中效果
1 | import React,{Component} from 'react' |
9)再优化:访问/跳转到/home后,没有选中状态
https://ant.design/components/menu-cn/#components-menu-demo-switch-mode
把上一步的leftNav组件的default改成selectedKeys即可。
1 | <Menu |
10)再优化:刷新后带子导航的没有默认展开
【1】得到当前请求的路由路径
【2】查找一个与当前请求路径匹配的子Item
【3】在第一次render()之前执行一次读取左导航config函数,防止放在render内多次渲染的浪费,为第一个render()准备数据(必须同步的)
【4】得到需要打开菜单项的key
【5】获取默认需要打开的路径
【6】调用方式修改,防止多次渲染,浪费资源
1 | import React,{Component} from 'react' |