ant design pro + umi4 菜单与路由，轻松搞定！

2023-07-23 10:01:04

使用 Ant Design Pro 和 Umi4 实现动态菜单和路由

Ant Design Pro 和 Umi4 是强大的框架，可用于构建动态菜单和路由，从而创建用户界面，根据用户的权限或其他条件动态调整。在本指南中，我们将逐步介绍如何使用这两个框架来实现此功能。

安装和项目创建

首先，使用以下命令安装 Ant Design Pro 和 Umi4：

npm install ant-design-pro umi

然后，创建一个新的项目：

umi new my-app

定义菜单和路由配置

在 src/layouts/BasicLayout.js 中，添加菜单和路由配置：

import { Menu, Route, Switch } from 'umi';
import { useModel } from 'umi';

const BasicLayout = () => {
  const { menuData, routerData } = useModel('@@initialState');
  return (
    <Layout>
      <Header>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['/']}
          items={menuData}
        />
      </Header>
      <Content>
        <Switch>
          {routerData.map(({ path, component }) => (
            <Route key={path} path={path} component={component} />
          ))}
        </Switch>
      </Content>
    </Layout>
  );
};

export default BasicLayout;

在模型中定义菜单和路由数据

在 src/models/@@initialState.js 中，定义菜单和路由数据：

import { getMenuData } from '@/services/menu';

export default {
  namespace: '@@initialState',
  state: {
    menuData: [],
    routerData: [],
  },
  effects: {
    *fetchMenuData(_, { call, put }) {
      const data = yield call(getMenuData);
      yield put({
        type: 'save',
        payload: {
          menuData: data,
        },
      });
    },
  },
  reducers: {
    save(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },
  },
};

添加子路由

在 src/pages/index.js 中，添加子路由：

export default () => {
  return (
    <div>
      <h1>欢迎来到首页</h1>
      <Link to="/about">关于我们</Link>
    </div>
  );
};

启动项目

最后，使用以下命令启动项目：

npm start

常见问题解答

1. 子路由为空时，父结点数据被清除

在这种情况下，使用以下代码清除父结点数据：

const handleEmptyChildRoutes = (routerData) => {
  routerData.forEach((route) => {
    if (route.routes && route.routes.length === 0) {
      delete route.routes;
    }
  });
};

2. 使用 patchClientRoutes 修改默认路由跳转

要修改默认路由跳转，请使用以下代码：

const patchClientRoutes = () => {
  const { routes } = window.__UMI_APP_STATE__;
  routes.forEach((route) => {
    if (route.path === '/') {
      route.redirect = '/home';
    }
  });
};

3. 布局页 BasicLayout 子 children 消失

要解决此问题，请将子 children 手动传递给路由组件：

const BasicLayout = ({ children }) => {
  const { menuData, routerData } = useModel('@@initialState');
  return (
    <Layout>
      <Header>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['/']}
          items={menuData}
        />
      </Header>
      <Content>
        <Switch>
          {routerData.map(({ path, component }) => (
            <Route key={path} path={path} component={component} />
          ))}
        </Switch>
        {children}
      </Content>
    </Layout>
  );
};

export default BasicLayout;