pref(layout): 使用useMemo对路由表进行预构建，避免因异步数据处理导致的闪烁问题(页面先跳转403后渲染正常)

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<string, ReactNode[]>();
+
     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 }) {
                 </div>
               )}
               <Content>
-                {routeMap.current.has(pathname) ? children : <NoAccess />}
+                {routeMapMemo.has(pathname) ? children : <NoAccess />}
               </Content>
             </div>
             {/*{showFooter && <Footer />}*/}