fix: cannot match route

packages/layout/src/index.tsx

@@ -4,6 +4,7 @@ import {
   renderMatches,
   renderRightContent,
   traverseRoutes,
+  traverseRoutesReplaceIcon,
 } from './utils'
 import ProLayout from '@ant-design/pro-layout'
 import { Suspense, useMemo } from 'react'
@@ -21,15 +22,24 @@ const Layout = (props: LayoutProps) => {
     children,
     rightContentRender,
     childrenRender = (c) => c,
-    routes,
     ...restProps
   } = props
 
-  const realRoutes = useMemo(() => traverseRoutes(routes, true), [routes])
+  // menu routes
+  const menusRoutes = useMemo(
+    () => traverseRoutesReplaceIcon(props.routes),
+    [props.routes]
+  )
+
+  const routes = useMemo(
+    () => traverseRoutes(props.routes, true),
+    [props.routes]
+  )
 
   const location = useLocation()
 
-  const matchResult = matchRoutes(realRoutes, location)
+  const matchResult = matchRoutes(routes, location)
+
   const routesElement = renderMatches(matchResult)
 
   const layoutRestProps: BasicLayoutProps & {
@@ -53,7 +63,7 @@ const Layout = (props: LayoutProps) => {
     <Suspense fallback="icon loading ~~~">
       <ProLayout
         title="Ant Design Pro"
-        route={{ routes: realRoutes }}
+        route={{ menusRoutes }}
         location={location}
         navTheme="dark"
         siderWidth={256}

packages/layout/src/utils/traverseRoutes.tsx

@@ -43,6 +43,19 @@ export const traverseRoutes = (
     if (redirect !== undefined)
       element = <Navigate replace to={redirect}></Navigate>
 
+    return {
+      ...route,
+      component,
+      element,
+      children: traverseRoutes(route.children),
+    }
+  }) as RoutesType
+}
+
+export const traverseRoutesReplaceIcon = (routes?: RoutesType): RoutesType => {
+  return routes?.map((route) => {
+    let { icon } = route
+
     if (typeof icon === 'string') {
       const iconName =
         (icon as string).slice(0, 1).toUpperCase() + (icon as string).slice(1)
@@ -54,8 +67,6 @@ export const traverseRoutes = (
 
     return {
       ...route,
-      component,
-      element,
       icon,
       children: traverseRoutes(route.children),
     }