32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
// src/layouts/MainLayout.js
|
|
// 主布局组件 - 为所有带导航栏的页面提供统一布局
|
|
import React, { Suspense } from "react";
|
|
import { Outlet } from "react-router-dom";
|
|
import { Box } from '@chakra-ui/react';
|
|
import HomeNavbar from "../components/Navbars/HomeNavbar";
|
|
import PageLoader from "../components/Loading/PageLoader";
|
|
|
|
/**
|
|
* MainLayout - 带导航栏的主布局
|
|
*
|
|
* 使用 <Outlet /> 渲染子路由，确保导航栏只渲染一次
|
|
* 页面切换时只有 Outlet 内的内容会更新，导航栏保持不变
|
|
* Suspense 边界确保导航栏始终可见，只有内容区域显示 loading
|
|
*/
|
|
export default function MainLayout() {
|
|
return (
|
|
<Box minH="100vh">
|
|
{/* 导航栏 - 在所有页面间共享，不会重新渲染 */}
|
|
<HomeNavbar />
|
|
|
|
{/* 页面内容区域 - 通过 Outlet 渲染当前路由对应的组件 */}
|
|
{/* Suspense 只包裹内容区域，导航栏保持可见 */}
|
|
<Box>
|
|
<Suspense fallback={<PageLoader message="页面加载中..." />}>
|
|
<Outlet />
|
|
</Suspense>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|