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

如果顯示出上圖的內容，就證明頁面新增成功了。