引入Menu

引入 Menu

1. 调整 router

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

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

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

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

export default GetRouters;

2. 调整 App

import React from "react";
import GetRouters from "./router/router";

const App = () => {
  return (
    <>
      <GetRouters />
    </>
  );
};

export default App;

3. 封装 Aside, 新建 src\pages\Layout\Aside.tsx

import React, { useState } from "react";
import { Menu } from "antd";
import { routerItem } from "../../router/router";

const Aside = () => {
  const [router] = useState(routerItem);
  return (
    <>
      <Menu mode="inline" theme="dark" items={router} />
    </>
  );
};

export default Aside;

4. Layout 引入

import React from "react";
import { Outlet } from "react-router-dom";
import Aside from "./Aside";

import "./Layout.scss";

function Layout() {
  return (
    <section id="container">
      <aside>
        <Aside />
      </aside>
      <section>
        <header>header</header>
        <main>
          <Outlet />
        </main>
      </section>
    </section>
  );
}

export default Layout;

5. 适应 antd 样式 src\pages\Layout\Layout.scss

#container {
  display: flex;
  width: 100vw;
  height: 100vh;

  aside {
    width: 200px;
    background-color: #001529; // 这里适配Aside
  }

  section {
    flex: 1;
    display: flex;
    flex-direction: column;

    header {
      background-color: aqua;
      height: 50px;
    }

    main {
      flex: 1;
      margin: 0;
    }
  }
}