实现Home页面导航的切换

实现 Home 页面导航的切换

一、Home 页面配置

1. 左侧 tab 的点击事件

   <Menu
     theme="dark"
     defaultSelectedKeys={["1"]}
     mode="inline"
     items={tabItem}
     onClick={(e) => menuClick(e.key)}
   />

1. 配置点击跳转

   // etc...
   const navitateTo = useNavigate();
   const menuClick = (key: string) => {
     navitateTo(key);
   };
   // etc...

1. src\pages\config\home.tsx 参数修改

   // etc...
   const items: MenuItem[] = [
     getItem("栏目一", "/page1", <PieChartOutlined />),
     getItem("栏目二", "/page2", <DesktopOutlined />),
     // etc...
   ];
   // etc...

1. 创建两个页面

• src\pages\Page1\Page1.tsx
• src\pages\Page2\Page2.tsx

1. 配置路由 src\router\router.tsx

   import React, { lazy, Suspense } from "react";
   import { Navigate } from "react-router-dom";

   import Home from "@/pages/Home/Home";
   const About = lazy(() => import("@/pages/About/About"));
   const Page1 = lazy(() => import("@/pages/Page1/Page1"));
   const Page2 = lazy(() => import("@/pages/Page2/Page2"));

   const withLoadingComponent = (comp: JSX.Element) => (
     <Suspense fallback={<div>Loading...</div>}>{comp}</Suspense>
   );

   const routes = [
     // 默认要展示page1的内容
     {
       path: "/",
       element: <Navigate to="/page1" />,
     },
     // page1 又是Home的组件,Home也展示
     {
       path: "/",
       element: <Home />,
       children: [
         {
           path: "/page1",
           element: withLoadingComponent(<Page1 />),
         },
         {
           path: "/page2",
           element: withLoadingComponent(<Page2 />),
         },
       ],
     },
     {
       path: "*",
       element: <Navigate to="/page1" />,
     },
   ];

   export default routes;

1. 配置 Outlet 实现点击跳转

• 说明：路由里, Page 1/2 是 Home 的子页面, Home 页面样式排版已固定
• 那么, Page 1/2 在 Outlet 里面显示
• 并且点击实现切换页面展示

   // etc...
   import { useNavigate, Outlet } from "react-router-dom";
   <Content
     style={{
       margin: "16px 16px 0",
       background: colorBgContainer,
     }}
   >
     <Outlet />
   </Content>;
   // etc...