Ant Design的layout布局 --- 根据路由配置渲染

在Ant Design中，可以使用Layout组件来构建布局，并且可以根据路由配置来动态渲染不同的组件。以下是一个简单的例子，展示如何使用Ant Design的Layout和Route组件来实现这一功能：

import React from 'react';
import { Layout, Menu, Switch, Route } from 'antd';
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from '@ant-design/icons';
 
const { Content, Sider } = Layout;
 
const Home = () => <h2>Home Page</h2>;
const User = () => <h2>User Page</h2>;
const Dashboard = () => <h2>Dashboard</h2>;
const Notification = () => <h2>Notification</h2>;
 
const App = () => {
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider>
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
          <Menu.Item key="1" icon={<UserOutlined />}>
            <Link to="/home">Home</Link>
          </Menu.Item>
          <Menu.Item key="2" icon={<LaptopOutlined />}>
            <Link to="/dashboard">Dashboard</Link>
          </Menu.Item>
          <Menu.Item key="3" icon={<NotificationOutlined />}>
            <Link to="/notification">Notification</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Content style={{ margin: 24 }}>
          <Switch>
            <Route path="/home" component={Home} />
            <Route path="/user" component={User} />
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/notification" component={Notification} />
          </Switch>
        </Content>
      </Layout>
    </Layout>
  );
};
 
export default App;

在这个例子中，我们定义了一个App组件，它使用了Layout组件来构建页面布局。Sider组件包含了一个Menu，用于导航。Switch组件用于根据Route的path来渲染对应的组件。这里使用了Ant Design的Menu组件的defaultSelectedKeys属性来标记当前选中的菜单项。

请注意，这个例子假设你正在使用React Router来处理路由。如果你没有使用React Router，你需要根据你的路由管理库来相应地修改代码。