feat: bugfix

src/routes/utils/renderRoute.js

@@ -2,8 +2,7 @@
 // 路由渲染工具函数
 
 import React from 'react';
-import { Route } from 'react-router-dom';
-import { LAYOUT_COMPONENTS } from '../constants';
+import { Route, Outlet } from 'react-router-dom';
 import { wrapWithProtection } from './wrapWithProtection';
 
 /**
@@ -11,14 +10,16 @@ import { wrapWithProtection } from './wrapWithProtection';
  *
  * 根据路由配置项生成 React Router 的 Route 组件。
  * 处理以下逻辑：
- * 1. 解析组件（特殊布局组件 vs 懒加载组件）
+ * 1. 解析组件（懒加载组件 or Outlet）
  * 2. 应用路由保护（根据 protection 字段）
- * 3. 生成唯一 key
+ * 3. 处理嵌套路由（children 数组）
+ * 4. 生成唯一 key
  *
  * @param {Object} routeItem - 路由配置项（来自 routeConfig.js）
  * @param {string} routeItem.path - 路由路径
- * @param {React.ComponentType|string} routeItem.component - 组件或组件标识符
+ * @param {React.ComponentType|null} routeItem.component - 懒加载组件或 null（null 表示使用 Outlet）
  * @param {string} routeItem.protection - 保护模式 (modal/redirect/public)
+ * @param {Array} [routeItem.children] - 子路由配置数组（可选）
  * @param {number} index - 路由索引，用于生成唯一 key
  *
  * @returns {React.ReactElement} Route 组件
@@ -27,19 +28,41 @@ import { wrapWithProtection } from './wrapWithProtection';
  * // 使用示例
  * const routes = [
  *   { path: 'community', component: CommunityComponent, protection: 'modal' },
- *   { path: 'auth/*', component: 'Auth', protection: 'public' },
+ *   { path: 'home', component: null, protection: 'public', children: [...] },
  * ];
  *
  * routes.map((route, index) => renderRoute(route, index));
  */
 export function renderRoute(routeItem, index) {
-    const { path, component, protection } = routeItem;
+    const { path, component, protection, children } = routeItem;
 
     // 解析组件：
-    // - 如果是字符串（如 'Auth', 'HomeLayout'），从 LAYOUT_COMPONENTS 映射表查找
+    // - 如果是 null，使用 <Outlet /> 用于嵌套路由
     // - 否则直接使用（懒加载组件）
-    const Component = LAYOUT_COMPONENTS[component] || component;
+    let Component;
+    let isOutletRoute = false;
 
+    if (component === null) {
+        Component = Outlet; // 用于嵌套路由
+        isOutletRoute = true;
+    } else {
+        Component = component; // 直接使用懒加载组件
+    }
+
+    // 如果有子路由，递归渲染
+    if (children && children.length > 0) {
+        return (
+            <Route
+                key={`${path}-${index}`}
+                path={path}
+                element={isOutletRoute ? <Outlet /> : wrapWithProtection(Component, protection)}
+            >
+                {children.map((childRoute, childIndex) => renderRoute(childRoute, childIndex))}
+            </Route>
+        );
+    }
+
+    // 没有子路由，渲染单个路由
     return (
         <Route
             key={`${path}-${index}`}