🧐[问题 | question] 子路由渲染问题

[Jimmylxue]

🧐 问题描述 | Problem description

新版本的antdpro 在子路由嵌套子路由的情况下，怎么对应的组件无法正常渲染出来呢，永远渲染的是父级的路由。

这个旧版本也不会这样呀，烦请各位大佬有空帮忙看看这个问题~

💻 示例代码 | Sample code

config/route.ts

export default [
  {
    path: '/manage',
    name: '系统管理',
    icon: 'crown',
    // access: 'canAdmin',
    routes: [
      { path: '/manage', redirect: '/manage/letter' },
      {
        path: '/manage/letter',
        name: '站内信',
        hideChildrenInMenu: true,
        component: './Manage/Letter',
        routes: [
          {
            path: '/manage/letter/edit',
            name: '站内信编辑',
            component: './Manage/Letter/edit.tsx',
          },
        ],
      },
    ],
  },
];

🚑 其他信息 | Other information

/manage/letter 下展示为： /manage/letter/edit 下展示为：

OS:

Node：

浏览器 | browser：

[chenshuai2144]

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下： 删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

问题描述： 在新版本的antdpro中，当子路由嵌套子路由时，对应的组件无法正常渲染出来，永远渲染的是父级的路由。

解决方案： 这个问题可能与路由配置的嵌套关系有关。可以尝试以下解决方案：

1. 在路由配置文件（config/route.ts）中，针对父级路由（/manage/letter）设置hideChildrenInMenu属性为false，表示不隐藏子菜单：

{
  path: '/manage/letter',
  name: '站内信',
  hideChildrenInMenu: false,
  component: './Manage/Letter',
  routes: [
    {
      path: '/manage/letter/edit',
      name: '站内信编辑',
      component: './Manage/Letter/edit.tsx',
    },
  ],
},

2. 在父级路由的组件文件（./Manage/Letter）中，使用<Outlet />组件来渲染子路由：

import { Outlet } from 'umi';

function Letter() {
  return (
    <div>
      {/* 父级路由组件内容 */}
      <h1>站内信</h1>

      {/* 渲染子路由 */}
      <Outlet />
    </div>
  );
}

export default Letter;

3. 在子路由的组件文件（./Manage/Letter/edit.tsx）中，同样使用<Outlet />组件来渲染子路由：

import { Outlet } from 'umi';

function Edit() {
  return (
    <div>
      {/* 子路由组件内容 */}
      <h1>站内信编辑</h1>

      {/* 渲染子路由 */}
      <Outlet />
    </div>
  );
}

export default Edit;

通过上述配置，即可实现子路由的正确渲染。

注意：在新版本的antdpro中，子路由的渲染方式可能发生了变化，所以需要根据最新的官方文档进行配置。