LayOut页面

根目录 Layout

• 根目录新建文件夹 layout/index.tsx

import { Outlet } from "react-router-dom";
import { Layout, Menu, theme, Watermark } from "antd";
import React from "react";
import styles from "@/styles/layout/layout.module.less";
const { Header, Content, Footer, Sider } = Layout;

const App: React.FC = () => {
  // const {
  //   token: { colorBgContainer },
  // } = theme.useToken();
  return (
    <Watermark content="翻版必究">
      <Layout>
        <Sider
          breakpoint="lg"
          collapsedWidth="0"
          onBreakpoint={(broken) => {
            console.log(broken);
          }}
          onCollapse={(collapsed, type) => {
            console.log(collapsed, type);
          }}
        >
          <div className={styles.logo} />
          侧边栏
        </Sider>
        <Layout>
          <Header
            className={styles["site-layout-sub-header-background"]}
            style={{ padding: 0 }}
          >
            顶部区域
          </Header>
          <Content style={{ margin: "24px 16px 0" }}>
            <div
              className={styles["site-layout-background"]}
              style={{ padding: 24, minHeight: 360 }}
            >
              <Outlet />
            </div>
          </Content>
          <Footer style={{ textAlign: "center" }}>
            Ant Design ©2018 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </Watermark>
  );
};

export default App;

• 根目录styles/layout/layout.module.less

#components-layout-demo-responsive .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.2);
}

.site-layout-sub-header-background {
  background: #fff;
}

.site-layout-background {
  background: #fff;
}

修改路由

• 找到 modules/common.tsx,让/重定向到/welcome

• /welcome 就是个children

import HomePage from "@/views/home";
import LoginPage from "@/views/login";
import ErrorPage from "@/views/error";
import { Navigate } from "react-router-dom";
import Layout from "@/layout";

const commonRoutes = [
  {
    path: "/",
    element: <Navigate to="/welcome" />,
  },
  {
    element: <Layout></Layout>,
    children: [
      {
        path: "/welcome",
        element: <HomePage />,
      },
    ],
  },
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    path: "*",
    element: <Navigate to="/404" />,
  },
  {
    path: "/404",
    element: <ErrorPage />,
  },
];

export default commonRoutes;