新建公共布局

1. 创建布局组件 src\components\AppLayout\AppLayout.tsx

import React from "react";
import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { Outlet, useNavigate } from "react-router-dom";
import { ItemType } from "antd/es/menu/hooks/useItems";
import { MenuInfo } from "rc-menu/lib/interface";

const { Header, Content, Sider } = Layout;

const navBar: ItemType[] = [
  {
    key: "1",
    label: "首页",
  },
  {
    key: "2",
    label: "代码",
  },
  {
    key: "3",
    label: "关于",
  },
];

const AppLayout = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const navigateTo = useNavigate();

  const menuList: ItemType[] = [
    {
      key: "user",
      icon: <UserOutlined />,
      label: "用户管理",
      children: [
        {
          key: "/user/list",
          icon: <UserOutlined />,
          label: "用户列表",
        },
      ],
    },
    {
      key: "role",
      icon: <NotificationOutlined />,
      label: "角色管理",
      children: [
        {
          key: "/role/list",
          icon: <LaptopOutlined />,
          label: "角色列表",
        },
      ],
    },
  ];

  // 跳转到页面
  const goTo = (info: MenuInfo) => {
    navigateTo(info.key);
  };

  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["2"]}
          items={navBar}
        />
      </Header>
      <Layout>
        <Sider width={200} style={{ background: colorBgContainer }}>
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{ height: "100%", borderRight: 0 }}
            items={menuList}
            onClick={goTo}
          />
        </Sider>
        <Layout style={{ padding: "0 24px 24px" }}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default AppLayout;

2. App.tsx 中引入

import React from "react";
import { Routes, Route } from "react-router-dom";

import DashBoard from "./pages/dashBoard";
import Login from "./pages/login";
import User from "./pages/user";
import Role from "./pages/role";
import AppLayout from "./components/AppLayout/AppLayout";

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<AppLayout />}>
          <Route path="/user/list" element={<User />} />
          <Route path="/role/list" element={<Role />} />
        </Route>
        <Route path="/login" element={<Login />} />
      </Routes>
    </>
  );
}

export default App;