React开发管理后台实践3---添加新页面

我们后台基本页面是以这个开源项目https://github.com/zhangZhiHao1996/react-admin-master为基础，我们就从这里开始。

添加审核医生页面

添加左侧菜单

首先在src/components/SiderNav/index.js文件中的首页后面，添加医生审核菜单，如下所示：

import React from 'react'
import CustomMenu from "../CustomMenu/index";

const menus = [
{
title: '首页',
icon: 'home',
key: '/home'
},
{
title: '医生管理',
icon: 'laptop',
key: '/home/doctor',
subs: [
{key: '/home/doctor/approve-doctor', title: '医生审核', icon: '',},
]
},
{
title: '基本组件',
icon: 'laptop',
key: '/home/general',
subs: [
{key: '/home/general/button', title: '按钮', icon: '',},
{key: '/home/general/icon', title: '图标', icon: '',},
]
},

添加菜单链接定义

在src/components/ContentMain/index.js文件中定义医生审核菜单对应的页面，如下所示：

import React from 'react'
import { withRouter, Switch, Redirect } from 'react-router-dom'
import LoadableComponent from '../../utils/LoadableComponent'
import PrivateRoute from '../PrivateRoute'

const Home = LoadableComponent(()=>import('../../routes/Home/index'))  //参数一定要是函数，否则不会懒加载，只会代码拆分

const ApproveDoctor = LoadableComponent(()=>import('../../routes/Doctor/ApproveDoctor/index')) // 审核医生链接和页面

//基本组件Demo
const ButtonDemo = LoadableComponent(()=>import('../../routes/General/ButtonDemo/index'))
......
@withRouter
class ContentMain extends React.Component {
render () {
return (
<div style={{padding: 16, position: 'relative'}}>
<Switch>
<PrivateRoute exact path='/home' component={Home}/>
// 审核通过医生链接和页面
<PrivateRoute exact path='/home/doctor/approve-doctor' component={ApproveDoctor} />

<PrivateRoute exact path='/home/general/button' component={ButtonDemo}/>
......

定义具体页面

在src/routes下创建目录Doctor/ApproveDoctor，并在其中添加index.js和style.css文件，在index.js文件中，只简单显示页面标题：

import React from 'react'
import {Carousel} from 'antd'
import './style.css'

const imgs = [
'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide1.jpg?raw=true',
'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide2.jpg?raw=true',
'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide3.jpg?raw=true',
'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide4.jpg?raw=true'
]

class ApproveDoctor extends React.Component {
render() {
return (
<div style={styles.bg} className='home'>
<h1>批准医生</h1>
</div>
)
}
}

const styles = {
bg:{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'calc(100vh - 64px)'
}
}

export default ApproveDoctor

如果显示出上图的内容，就证明页面添加成功了。