diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx index 6624209..7db0797 100644 --- a/src/pages/layout.tsx +++ b/src/pages/layout.tsx @@ -1,4 +1,4 @@ -import React, { useState, ReactNode, useRef, useEffect } from 'react'; +import React, { useState, ReactNode, useRef, useEffect, useMemo } from 'react'; import { Layout, Menu, Breadcrumb, Spin } from '@arco-design/web-react'; import cs from 'classnames'; import { @@ -114,14 +114,14 @@ function PageLayout({ children }: { children: ReactNode }) { const paddingTop = showNavbar ? { paddingTop: navbarHeight } : {}; const paddingStyle = { ...paddingLeft, ...paddingTop }; - // 初始化时创建并实例路由映射 - useEffect(() => { - // 仅构建 routeMap,不渲染菜单 + const routeMapMemo = useMemo(() => { + const map = new Map(); + function buildRouteMap(_routes: IRoute[], parentNode = []) { _routes.forEach((route) => { const { breadcrumb = true, ignore } = route; - routeMap.current.set( + map.set( `/${route.key}`, breadcrumb ? [...parentNode, route.name] : [] ); @@ -129,7 +129,7 @@ function PageLayout({ children }: { children: ReactNode }) { const visibleChildren = (route.children || []).filter((child) => { const { ignore, breadcrumb = true } = child; if (ignore || route.ignore) { - routeMap.current.set( + map.set( `/${child.key}`, breadcrumb ? [...parentNode, route.name, child.name] : [] ); @@ -144,6 +144,7 @@ function PageLayout({ children }: { children: ReactNode }) { } buildRouteMap(routes); + return map; }, [routes]); function renderRoutes(locale) { @@ -217,7 +218,7 @@ function PageLayout({ children }: { children: ReactNode }) { } useEffect(() => { - const routeConfig = routeMap.current.get(pathname); + const routeConfig = routeMapMemo.get(pathname); setBreadCrumb(routeConfig || []); updateMenuStatus(); }, [pathname]); @@ -279,7 +280,7 @@ function PageLayout({ children }: { children: ReactNode }) { )} - {routeMap.current.has(pathname) ? children : } + {routeMapMemo.has(pathname) ? children : } {/*{showFooter &&