Ant-Design/Pro-Components的基础使用

react项目搭建过程省略，仅记录使用pro-component进行全局布局配置+SPA的实现。

1.引入Pro-Component，与基础配置

antd提供了很多官方上的配置，procomponents.ant.design/components/… 但是官方配置中没有记录，实现SPA的写法

1.1 配置App.js

import type { ProSettings } from '@ant-design/pro-components';
import { PageContainer, ProLayout, SettingDrawer, ProCard } from '@ant-design/pro-components';
import { useState } from 'react';
import defaultProps from './_defaultProps';

export default () => {
    const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
        layout: 'side',
    });

    const [pathname, setPathname] = useState('/list/sub-page/sub-sub-page1');//当前菜单的位置，可以设置初时默认的
    const [component, setComponent] = useState(null);//切换的component

    return (
        <div
            id="test-pro-layout"
            style={{
                height: '100vh',
            }}
        >
            <ProLayout
                siderWidth={216}
                {...defaultProps}
                location={{
                    pathname,
                }}
                avatarProps={{
                    src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
                    title: '七妮妮',
                    size: 'small',
                }}
                menuItemRender={(item, dom) => (//配置菜单渲染方式和添加事件
                    <div
                        onClick={() => {
                            setPathname(item.path || '/welcome');
                            item.component && setComponent(item.component || <div>404</div>);//根据菜单切换，设置对应的component
                        }}
                    >
                        {dom}
                    </div>
                )}
                {...settings}
            >
                <PageContainer>
                    <ProCard
                        style={{
                            height: '100vh',
                            minHeight: 800,
                        }}
                    >
                        {/* 实现SPA的重点 */}
                        {component}
                    </ProCard>
                </PageContainer>
            </ProLayout>
            <SettingDrawer
                pathname={pathname}
                enableDarkTheme
                getContainer={() => document.getElementById('test-pro-layout')}
                settings={settings}
                onSettingChange={(changeSetting) => {
                    setSetting(changeSetting);
                }}
                disableUrlParams={false}
            />
        </div>
    );
};

1.2 配置ProLayout的路由与菜单

import { ChromeFilled, CrownFilled, SmileFilled, TabletFilled } from '@ant-design/icons';
import Home from "../page/Home";
import Welcom from "../page/Welcom";

export default {
    route: {
        path: '/',
        routes: [
            {
                path: '/welcome',
                name: '欢迎',
                icon: <SmileFilled />,
                component: <Welcom />,
            },
            {
                path: '/admin',
                name: '管理页',
                icon: <CrownFilled />,//设置菜单的icon
                access: 'canAdmin',
                component: './Admin',//点击菜单对应的component
                routes: [
                    {
                        path: '/admin/sub-page1',
                        name: '一级页面',
                        icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
                        component: <Home />,
                    },
                    {
                        path: '/admin/sub-page2',
                        name: '二级页面',
                        icon: <CrownFilled />,
                        component: <Home />,
                    },
                ],
            },
            {
                name: '列表页',
                icon: <TabletFilled />,
                path: '/list',
                component: './ListTableList',
                routes: [
                    {
                        path: '/list/sub-page',
                        name: '列表页面',
                        icon: <CrownFilled />,
                        routes: [
                            {
                                path: 'sub-sub-page1',
                                name: '一一级列表页面',
                                icon: <CrownFilled />,
                                component: './Welcome',
                            },
                        ],
                    },
                    {
                        path: '/list/sub-page2',
                        name: '二级列表页面',
                        icon: <CrownFilled />,
                        component: './Welcome',
                    },
                    {
                        path: '/list/sub-page3',
                        name: '三级列表页面',
                        icon: <CrownFilled />,
                        component: './Welcome',
                    },
                ],
            },
            {
                path: 'https://ant.design',
                name: 'Ant Design 官网外链',
                icon: <ChromeFilled />,
            },
        ],
    },
    location: {
        pathname: '/',
    },
    appList: [//一种导航链接列表
        {
            icon: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
            title: 'Ant Design',
            desc: '杭州市较知名的 UI 设计语言',
            url: 'https://ant.design',
        },
    ],
};