63 lines
2.1 KiB
JavaScript
63 lines
2.1 KiB
JavaScript
// src/routes/index.js
|
||
// 路由主入口 - 精简版，纯组合逻辑
|
||
|
||
import React, { useMemo } from 'react';
|
||
import { Routes, Route, Navigate } from 'react-router-dom';
|
||
|
||
// 路由配置
|
||
import { getMainLayoutRoutes, getStandaloneRoutes } from './routeConfig';
|
||
|
||
// 布局组件
|
||
import MainLayout from '@layouts/MainLayout';
|
||
|
||
// 路由工具和组件
|
||
import { renderRoute } from './utils';
|
||
import { RouteContainer } from './components';
|
||
|
||
/**
|
||
* AppRoutes - 应用路由组件
|
||
*
|
||
* 职责：
|
||
* - 组合路由配置、工具函数、容器组件
|
||
* - 定义路由结构（主布局路由 + 独立路由）
|
||
* - 处理默认路由和 404 跳转
|
||
*
|
||
* 架构优化（2024-10-30）：
|
||
* - ✅ 模块化拆分：主文件从 165 行精简到 48 行
|
||
* - ✅ 职责分离：逻辑/配置/UI 完全解耦
|
||
* - ✅ 可测试性：工具函数可独立测试
|
||
* - ✅ 可复用性：组件和工具可在其他地方使用
|
||
*
|
||
* 目录结构：
|
||
* - constants/ - 常量配置（布局映射、保护包装器）
|
||
* - utils/ - 工具函数（renderRoute, wrapWithProtection）
|
||
* - components/ - 路由组件（RouteContainer）
|
||
*/
|
||
export function AppRoutes() {
|
||
// 🎯 性能优化：使用 useMemo 缓存路由计算结果
|
||
const mainLayoutRoutes = useMemo(() => getMainLayoutRoutes(), []);
|
||
const standaloneRoutes = useMemo(() => getStandaloneRoutes(), []);
|
||
|
||
return (
|
||
<RouteContainer>
|
||
<Routes>
|
||
{/* 主布局路由 - 带导航栏和页脚 */}
|
||
<Route element={<MainLayout />}>
|
||
{mainLayoutRoutes.map(renderRoute)}
|
||
</Route>
|
||
|
||
{/* 独立路由 - 无布局（如登录页）*/}
|
||
{standaloneRoutes.map(renderRoute)}
|
||
|
||
{/* 默认路由 - 重定向到首页 */}
|
||
<Route path="/" element={<Navigate to="/home" replace />} />
|
||
|
||
{/* 404 页面 - 捕获所有未匹配的路由 */}
|
||
<Route path="*" element={<Navigate to="/home" replace />} />
|
||
</Routes>
|
||
</RouteContainer>
|
||
);
|
||
}
|
||
|
||
export default AppRoutes;
|