嵌套路由子路由对应组件怎样覆盖父路由的原有组件

[Alextale777]

如图，我在顶层路由对应的页面设置了一张表，现点击表中的任一一行按钮进入详情页，该详情页属于/node的子路由。但是显示结果如下

父页面组件将子页面组件覆盖住了。
现我想在路由结构不变的情况下，正确显示子组件，即在/node/group路径中只显示子页面，请问我该如何在umi/max中调整。
我的路由如下
{ name: '用户信息', path: '/node', component: './Node', hideInBreadcrumb: false, routes: [ { name: '甘雨', path: 'group', component: './Group', hideInMenu: true, } ], }

[fz6m]

展示什么内容要看你自己怎么编写代码，这个时候路径 /node 展示的是 ./Node ，等路径切换到 /node/group 就会变成嵌套路由了，嵌套的子路由内容是 ./Group ，这部分会在父路由 ./Node 文件里的 <Outlet /> 部分展示，所以如何展示内容取决于你的代码如何编写。

你可能需要的是：

  {
      path: '/node',
      routes: [
        {
          path: '',
          component: 'node/index'
        },
        {
          path: 'group',
          component: 'node/group'
        }
      ]
    }

不添加 /node 的父组件，以让子路由替换整个页面展示（如果添加了父路由，如我上文所述，需要通过 <Outlet /> 展示）

关于 <Outlet /> ，详见 react router v6 文档说明。

[Alextale777]

但是，我希望面包屑保持严格的层级关系，上述方法导致了index页面与group页面同级，使得他们的面包屑不是层次关系。而按我的需求，比如说我在group页面，我希望显示的面包屑为 index/group。这样我可以通过面包屑回到index页面。

[fz6m]

如上文所述，umi 4 使用的是 react router v6 ，一旦出现嵌套路由，就必须要手动编写代码，通过 <Outlet /> 控制展示内容。

以下参考实现可以实现你的效果：

// src/pages/node/index.tsx

import { PageContainer } from '@ant-design/pro-components';
import { Outlet, useNavigate, useRouteProps } from '@umijs/max';
import { ReactNode } from 'react';

export default function Page() {
  const props = useRouteProps();
  const isFullPage = !!props?.hideInMenu;
  const nav = useNavigate();

  let container: ReactNode = null;

  if (isFullPage) {
    container = <Outlet />;
  } else {
    container = (
      <button
        onClick={() => {
          nav('group');
        }}
      >
        go group
      </button>
    );
  }

  return <PageContainer ghost>{container}</PageContainer>;
}

// .umirc.ts

    {
      name: '菜单1',
      path: '/node',
      component: './node/index',
      routes: [
        {
          name: '菜单1-group',
          path: 'group',
          component: './node/group',
          hideInMenu: true,
        }
      ]
    }