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

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