Middle.tsx

import React from "react";
import { Layout, Menu, Breadcrumb } from "antd";
import { UserOutlined, LaptopOutlined } from "@ant-design/icons";
import { 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;