我想将antd布局应用到所有组件

Question

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import CreateEvent from "./CreateEvent"; // EventPage.js 파일을 가져옵니다.
import EventPage from "./EventPage"; // EventPage.js 파일을 가져옵니다.
import TimeTest from "./TimeTest";
import NoMatch from "./CreateEvent"; // NoMatch 컴포넌트를 가져옵니다.
import {
  UserOutlined,
  ExperimentOutlined,
  CheckCircleOutlined
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import MoHeader from "./Components/MoHeader";
import MoFooter from "./Components/MoFooter";

const { Header, Content, Footer, Sider } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = React.useState(false);

  const onCollapse = (collapsed) => {
    setCollapsed(collapsed);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header>
        <MoHeader/>
      </Header>

      <Layout>
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={onCollapse}
          style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, zIndex: 1 }}
        >
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1" icon={<UserOutlined />}>
              <Link exact to="/" />
              Profile
            </Menu.Item>
            <Menu.Item key="2" icon={<ExperimentOutlined />}>
              <Link exact to="/test" />
              Experience
            </Menu.Item>
            <Menu.Item key="3" icon={<CheckCircleOutlined />}>
              <Link exact to="/time" />
              Skill
            </Menu.Item>
          </Menu>
        </Sider>

        <Layout className="site-layout" style={{ marginLeft: collapsed ? 80 : 200 }}>
          <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
            <div className="app">
              <Routes> 
                <Route path="/" element={<CreateEvent />} />
                <Route path="/test" element={<EventPage />} />
                <Route path="/test/:uuid" element={<EventPage />} />
                <Route path="/time" element={TimeTest} />
                <Route path="/*" element={<NoMatch />} />
              </Routes>
            </div>
          </Content>

          <Footer>
            <MoFooter/>
          </Footer>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default App;

我像这样制作了我的 app.js 以应用 antd 布局。主屏幕（createEvent）工作正常，但是当我按菜单进入另一个站点时，布局未应用。

有没有办法将通用布局应用于所有组件？

当我按下菜单上的按钮时，我希望布局保持不变，但只有组件出现。

Answer 1

您是否尝试过使用“Outlet”组件，您可以轻松地使用您想要的任何布局来包装子路由..