实现页面切换和保持

1. router 调整

import { Navigate, useRoutes } from "react-router-dom";
import type { MenuProps } from "antd";

import User from "../pages/User/User";
import Home from "../pages/Home/Home";
import Layout from "../pages/Layout/Layout";

type MenuItem = Required<MenuProps>["items"][number];
export type MenuItemSelf = MenuItem & {
  path: string;
  element: JSX.Element;
  children?: MenuItemSelf[];
};

export const routerItem: MenuItemSelf[] = [
  {
    path: "/",
    label: "首页",
    key: "/",
    element: <Navigate to="/layout/home" />,
  },
  {
    path: "/layout",
    label: "控制台",
    key: "layout",
    element: <Layout />,
    children: [
      {
        path: "user",
        label: "用户",
        key: "user",
        element: <User />,
        index: "true",
      },
      {
        path: "home",
        label: "首页",
        key: "home",
        element: <Home />,
      },
    ],
  },
];

const GetRouters = () => {
  return useRoutes(routerItem);
};

export default GetRouters;

2. Aside.tsx

import React, { useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { Menu } from "antd";
import type { MenuProps } from "antd";
import { routerItem } from "../../router/router";

const Aside = () => {
  const navigate = useNavigate();
  const [router] = useState(routerItem);
  const { pathname } = useLocation();

  // 哪个二级菜单打开
  const [openKeys, setOpenKeys] = useState([
    pathname.split("/").length > 1 ? pathname.split("/")[1] : "",
  ]);

  // 点击跳转
  const handleMenu: MenuProps["onClick"] = (e) => {
    navigate(e.key);
  };

  // 哪个页面高亮
  const onOpenChange = (keys: string[]) => {
    setOpenKeys([keys[keys.length - 1]]);
  };

  return (
    <>
      <Menu
        theme="dark"
        mode="inline"
        items={router}
        onClick={handleMenu}
        onOpenChange={onOpenChange}
        openKeys={openKeys}
        defaultSelectedKeys={[pathname.split("/").at(-1) || ""]}
      />
    </>
  );
};

export default Aside;