从小白到熟手，Umi.js动态添加路由渲染菜单栏全攻略

2023-12-31 08:12:12

Umi.js 中的动态路由和菜单栏渲染

动态路由的添加

Umi.js 提供了轻松添加动态路由的能力，可通过在 src/routes 目录下创建路由文件来实现。每个路由文件包含有关路径、组件和权限的信息。

例如，要创建到仪表盘的路由，可以在 src/routes/Dashboard.js 中定义：

export default {
  path: '/dashboard',
  component: () => import('./Dashboard'),
  access: 'canViewDashboard',
};

在 App.js 中添加动态路由

下一步，需要在 src/App.js 中添加动态路由逻辑。这可以通过使用 useModel 钩子函数来实现：

import { useModel } from 'umi';

const App = () => {
  const { routes } = useModel('@@router');

  return (
    <Router routes={routes} />
  );
};

export default App;

渲染菜单栏

要将动态添加的路由显示在菜单栏中，需要在 src/layouts 目录下创建布局文件，例如 src/layouts/BasicLayout.js：

import { Menu, Icon } from 'antd';
import { useModel } from 'umi';

const BasicLayout = (props) => {
  const { routes } = useModel('@@router');

  const renderMenus = (routes) => {
    return routes.map((route) => {
      return (
        <Menu.Item key={route.path}>
          <Icon type={route.icon} />
          <span>{route.name}</span>
        </Menu.Item>
      );
    });
  };

  return (
    <Layout>
      <Sider>
        <Menu theme="dark" mode="inline">
          {renderMenus(routes)}
        </Menu>
      </Sider>
      <Content>{props.children}</Content>
    </Layout>
  );
};

export default BasicLayout;

在 index.js 中指定布局

最后，在 src/index.js 中指定应用程序的布局：

import { createRoot } from 'react-dom';
import BasicLayout from './layouts/BasicLayout';

createRoot(document.getElementById('root')).render(
  <Router routes={routes} fallback={BasicLayout} />
);