补全剩余页面

xx

1. 创建页面, 修改路由

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

   // 页面
   import Home from "@/pages/Home/Home"; // 没必要懒加载了, 进来就看到Home
   const About = lazy(() => import("@/pages/About/About"));
   const Page1 = lazy(() => import("@/pages/Page1/Page1"));
   const Page2 = lazy(() => import("@/pages/Page2/Page2"));
   const Page301 = lazy(() => import("@/pages/Page301/Page301"));
   const Page302 = lazy(() => import("@/pages/Page302/Page302"));
   const Page401 = lazy(() => import("@/pages/Page401/Page401"));
   const Page402 = lazy(() => import("@/pages/Page402/Page402"));
   const Page5 = lazy(() => import("@/pages/Page5/Page5"));

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

   // 嵌套路由
   const routes = [
     {
       path: "/",
       element: <Navigate to="/page1" />,
     },
     {
       path: "/",
       element: <Home />,
       children: [
         {
           path: "/page1",
           element: withLoadingComponent(<Page1 />),
         },
         {
           path: "/page2",
           element: withLoadingComponent(<Page2 />),
         },
         {
           path: "/page3/page301",
           element: withLoadingComponent(<Page301 />),
         },
         {
           path: "/page3/page302",
           element: withLoadingComponent(<Page302 />),
         },
         {
           path: "/page4/page401",
           element: withLoadingComponent(<Page401 />),
         },
         {
           path: "/page4/page402",
           element: withLoadingComponent(<Page402 />),
         },
         {
           path: "/page5",
           element: withLoadingComponent(<Page5 />),
         },
       ],
     },
     {
       path: "*",
       element: <Navigate to="/page1" />,
     },
   ];

   export default routes;

1. 修改组件参数

   import React, { useState } from "react";
   import { useNavigate, useLocation } from "react-router-dom";
   import { Menu } from "antd";
   import {
     DesktopOutlined,
     FileOutlined,
     PieChartOutlined,
     TeamOutlined,
     UserOutlined,
   } from "@ant-design/icons";

   const items = [
     {
       label: "栏目1",
       key: "/page1",
       icon: <PieChartOutlined />,
     },
     {
       label: "栏目2",
       key: "/page2",
       icon: <DesktopOutlined />,
     },
     {
       label: "栏目3",
       key: "page3",
       icon: <UserOutlined />,
       children: [
         {
           label: "栏目301",
           key: "/page3/page301",
         },
         {
           label: "栏目302",
           key: "/page3/page302",
         },
       ],
     },
     {
       label: "栏目4",
       key: "page4",
       icon: <FileOutlined />,
       children: [
         {
           label: "栏目401",
           key: "/page4/page401",
         },
         {
           label: "栏目402",
           key: "/page4/page402",
         },
       ],
     },
     {
       label: "栏目5",
       key: "/page5",
       icon: <TeamOutlined />,
     },
   ];

   const HomeMenu: React.FC = () => {
     const navigateTo = useNavigate();
     const { pathname } = useLocation();

     // 页面保持
     const [openKeys, setOpenKeys] = useState([
       pathname.split("/").length > 1 ? pathname.split("/")[1] : "",
     ]);

     // 切换
     const menuClick = (e: { key: string }) => {
       navigateTo(e.key);
     };

     // 控制菜单闭合
     const onOpenChange = (keys: string[]) => {
       setOpenKeys([keys[keys.length - 1]]);
     };

     return (
       <Menu
         theme="dark"
         defaultSelectedKeys={[pathname]}
         mode="inline"
         items={items}
         onClick={menuClick}
         onOpenChange={onOpenChange}
         openKeys={openKeys}
       />
     );
   };

   export default HomeMenu;