Middle.tsx

import React from 'react'
import {Layout,Menu,Breadcrumb} from 'antd'
import { UserOutlined, LaptopOutlined } from '@ant-design/icons'
import { Switch, Route } from 'react-router-dom'
import User from './User'


const { SubMenu } = Menu;
const { Content,Sider } = Layout 


function Middle() {
  return (
    <Content style={{padding:'0 50px'}}>
      <Breadcrumb style={{margin:'16px 0'}}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
      </Breadcrumb>
      <Layout className="site-layout-background" style={{padding:'24px 0'}}>
        
          <Route path='/user/' component={User}></Route>
          <Route path={'/admin'}>
            <Sider className="site-layout-background" width={200}>
              <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} style={{height:'100%'}} >
                <SubMenu key="sub1" icon={<UserOutlined/>} title="管理员信息">
                  <Menu.Item key="1">所有管理员</Menu.Item>
                  <Menu.Item key="2">失效管理员</Menu.Item>
                </SubMenu>
                <SubMenu key="sub2" icon={<LaptopOutlined/>} title="管理员地址">
                  <Menu.Item key="1">地址1</Menu.Item>
                  <Menu.Item key="2">地址2</Menu.Item>
                  <Menu.Item key="3">地址3</Menu.Item>
                </SubMenu>
              </Menu>
            </Sider>
            <Content style={{padding:'0 24px',minHeight:280}}>管理员</Content>
          </Route>
          <Route path={'/about'}>
            <Content style={{padding:'0 24px',minHeight:280}}>关于</Content>
          </Route>
        
        
      </Layout>
    </Content>
  )
}
export default Middle;