User.tsx

import React from 'react'
import {Layout,Menu} from 'antd'
import { UserOutlined, LaptopOutlined } from '@ant-design/icons'
import { Link, Route } from 'react-router-dom'
import AllUser from './Pages/user/AllUser'
import BanedUser from './Pages/user/BanedUser'
import VipUser from './Pages/user/VipUser'

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


function User(){
  console.log("rerender")
  return (
    <Layout>
      <Sider className="site-layout-background" width={200}>
        <Menu mode="inline" defaultSelectedKeys={['2']} defaultOpenKeys={['sub1']} inlineCollapsed={false} style={{height:'100%'}} >
          <SubMenu key="sub1" icon={<UserOutlined/>} title="用户信息" >
            <Menu.Item key="1"><Link to='/user/alluser'>所有用户</Link></Menu.Item>
            <Menu.Item key="2"><Link to='/user/baneduser'>封禁用户</Link></Menu.Item>
            <Menu.Item key="3"><Link to='/user/vipuser'>VIP用户</Link></Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<LaptopOutlined/>} title="用户地址">
            <Menu.Item key="4">地址1</Menu.Item>
            <Menu.Item key="5">地址2</Menu.Item>
            <Menu.Item key="6">地址3</Menu.Item>
          </SubMenu>
        </Menu>
      </Sider>
      <Content style={{padding:'0 24px',minHeight:280}}>
        <Route path='/user/alluser' component={AllUser}></Route>
        <Route path='/user/baneduser' component={BanedUser}></Route>
        <Route path='/user/vipuser' component={VipUser}></Route>
      </Content>
    </Layout>
  )
}

export default User