彻底解决Ant Design Pro子路由嵌套渲染难题

彻底解决Ant Design Pro子路由嵌套渲染难题

【免费下载链接】ant-design-pro 👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro! 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro

问题引入：子路由嵌套的三大痛点

你是否在使用Ant Design Pro开发时遇到过这些问题：配置好子路由后页面一片空白、菜单高亮与路由不匹配、管理员页面无法正确显示子内容？这些都是子路由（Sub-route）嵌套配置不当导致的常见问题。本文将通过三步解决方案，结合项目源码实例，帮助你彻底解决这些难题。

解决方案：三步实现完美嵌套路由

1. 路由层级配置 config/routes.ts

在Ant Design Pro中，子路由通过routes属性进行嵌套配置。以管理员页面为例：

{
  path: '/admin',          // 父路由路径
  name: 'admin',           // 对应菜单名称
  icon: 'crown',           // 菜单图标
  access: 'canAdmin',      // 权限控制
  routes: [                // 子路由配置数组
    {
      path: '/admin',
      redirect: '/admin/sub-page',  // 默认重定向
    },
    {
      path: '/admin/sub-page',      // 子路由完整路径
      name: 'sub-page',             // 子菜单名称
      component: './Admin',         // 子页面组件
    },
  ],
}

2. 父页面渲染子路由出口

父页面需要通过Outlet组件（Umi 4+）或{children}（Umi 3）渲染子路由内容。查看src/pages/Admin.tsx，当前实现缺少子路由出口，需添加：

import { Outlet } from 'umi';  // 导入Outlet组件

const Admin: React.FC = () => {
  return (
    <PageContainer>
      {/* 现有内容 */}
      <Outlet />  {/* 子路由内容将在这里渲染 */}
    </PageContainer>
  );
};

3. 菜单与权限同步配置

菜单国际化配置

确保src/locales/zh-CN/menu.ts中菜单名称与路由name匹配：

export default {
  "menu.admin": "管理员",
  "menu.admin.sub-page": "子页面",  // 格式：menu.{父name}.{子name}
};

权限控制配置

在src/access.ts中定义权限函数：

export default function access(initialState: { currentUser?: API.CurrentUser }) {
  const { currentUser } = initialState || {};
  return {
    canAdmin: currentUser && currentUser.role === 'admin',  // 管理员权限判断
  };
}

路由工作原理流程图

常见问题排查指南

问题现象	可能原因	解决方案
子页面空白	缺少Outlet组件	在父页面添加<Outlet />
菜单不高亮	路由name与menu配置不匹配	统一routes.name与menu.ts中的键名
权限失效	access配置错误	检查src/access.ts中的权限逻辑

项目目录结构参考

src/
├── pages/
│   ├── Admin.tsx          # 父页面组件
│   └── user/              # 用户相关子页面
├── locales/
│   └── zh-CN/
│       └── menu.ts        # 菜单国际化配置
└── access.ts              # 权限控制文件

总结与实践

通过正确配置路由层级、添加子路由出口、同步菜单权限，即可完美解决Ant Design Pro的子路由嵌套问题。建议结合项目中的src/pages/Welcome.tsx示例页面，尝试创建自己的嵌套路由结构。如有疑问，可参考官方文档中路由配置指南。

【免费下载链接】ant-design-pro 👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro! 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro