Umi + React + Ant Design Pro 项目实践（六）—— ProLayout 应用

打开 .umirc.ts 文件：

import { defineConfig } from "umi";

export default defineConfig({
  plugins: ['@umijs/plugins/dist/react-query'],
  reactQuery: {},
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
    { path: "/products", component: "products" },
  ],
  npmClient: 'pnpm',
});

修改 .umirc.ts 文件：

import { defineConfig } from "umi";

export default defineConfig({
  routes: [
    { path: "/", component: "index", name:'home'},
    { path: "/docs", component: "docs", name:'docs' },
    { path: "/products", component: "products", name:'products' },
  ],
  plugins: ['@umijs/plugins/dist/react-query'],
  reactQuery: {},
  npmClient: 'pnpm',
});

打开 src/layouts/index.tsx 文件：

import { Link, Outlet } from 'umi';
import styles from './index.less';

export default function Layout() {
  return (
    <div className={styles.navs}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/docs">Docs</Link>
        </li>
        <li>
          <Link to="/products">products</Link>
        </li>
        <li>
          <a href="https://github.com/umijs/umi">Github</a>
        </li>
      </ul>
      <Outlet />
    </div>
  );
}

编辑 src/layouts/index.tsx 文件：

import { ProLayout } from '@ant-design/pro-layout';
import { Link, Outlet, useAppData, useLocation } from 'umi';

export default function Layout() {
  const { clientRoutes } = useAppData();
  const location = useLocation();
  return (
    <ProLayout
      route={clientRoutes[0]}
      location={location}
      title={'Umi x Ant Design'}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children) {
          return defaultDom;
        }
        if (menuItemProps.path && location.pathname !== menuItemProps.path) {
          return (
            <Link to={menuItemProps.path} target={menuItemProps.target}>
              {defaultDom}
            </Link>
          );
        }
        return defaultDom;
      }}
    >
      <Outlet />
    </ProLayout>
  );
}

这里先用 umi 的 useAppData 拿到全局客户端路由 clientRoutes，这是一份嵌套结构的路由表，我们把 clientRoutes[0] 传给 ProLayout；再通过 useLocation() 拿到 location 信息，也传给 ProLayout 来决定哪个菜单应该高亮；同时我们希望点击菜单时做路由跳转，需要需要定制 ProLayout 的 menuItemRender 方法。

页面效果：

接下来，可以通过 npm run build 进行应用构建。

构建完成：

构建会打包所有的资源，包含 JavaScript, CSS, Web Fonts, Html, 图片等。

构建完成之后，生成的文件在 /dist/ 目录下。如下图：