隐藏没有二级菜单时的dom

src/layout/RootLayout.tsx

@@ -18,6 +18,7 @@ import type { MenuDataItem } from '@ant-design/pro-layout/es/typing'
 import { convertToMenu, flattenTree } from '@/utils'
 import { Flex, Menu, Space } from 'antd'
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
+import { If } from 'react-if'
 
 //根据menuData生成Breadcrumb所需的数据
 const getBreadcrumbData = (menuData: MenuItem[], pathname: string) => {
@@ -186,6 +187,7 @@ export default () => {
                           }
                   >
 
+                    <If condition={childMenuRef.current?.length > 0}>
                       <Flex className={styles.childMenus}>
                         {
                                 !collapsed && <div className={styles.childMenuTop}>
@@ -193,6 +195,7 @@ export default () => {
                                 </div>
                         }
 
+
                         <Menu
                                 mode={'inline'}
                                 inlineCollapsed={collapsed}
@@ -229,6 +232,8 @@ export default () => {
                           }
                         </div>
                       </Flex>
+                    </If>
+
                     <Flex flex={1} className={styles.body} aria-description={'main-body'} vertical={true}>
                       <div className={styles.bodyHeader}>
                         <PageBreadcrumb