React项目如何为所有组件统一应用Ant Design布局？

你的代码存在几个关键问题，导致路由跳转时布局无法保持：

1. 缺少Router上下文包裹：导入了BrowserRouter as Router但未在根组件中使用，导致路由跳转触发全页刷新，布局无法维持。
2. TimeTest组件渲染错误：直接传入组件引用而非JSX元素，组件无法正常渲染。
3. NoMatch组件导入错误：错误导入了CreateEvent组件，导致404页面显示错误内容。
4. 菜单Link绑定不完整：Link标签未包裹菜单文本，点击文本区域可能无法触发路由跳转。

修改后的完整代码 #

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import CreateEvent from "./CreateEvent";
import EventPage from "./EventPage";
import TimeTest from "./TimeTest";
// 替换为实际的NoMatch组件路径
import NoMatch from "./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 (
    <Router>
      <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</Link>
              </Menu.Item>
              <Menu.Item key="2" icon={<ExperimentOutlined />}>
                <Link exact to="/test">Experience</Link>
              </Menu.Item>
              <Menu.Item key="3" icon={<CheckCircleOutlined />}>
                <Link exact to="/time">Skill</Link>
              </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>
    </Router>
  );
};

export default App;

关键修改点说明 #

• 添加Router包裹：所有路由相关组件必须在Router上下文内，确保路由跳转是单页无刷新模式，布局得以保留。
• 修正TimeTest渲染：将element={TimeTest}改为element={<TimeTest />}，符合React组件渲染语法。
• 修正NoMatch导入：替换为正确的组件路径，保证404页面正常显示。
• 完善菜单Link：将菜单文本放入Link标签内，点击菜单任意区域都能触发跳转，提升交互体验。

内容的提问来源于stack exchange，提问作者naleun