ant design pro v5子路由页面不显示的问题

我一开始的路由配置：

//config/route.js
export default [
  {
    path: '/',
    redirect: '/food',
  },
  {
    name: 'food',
    icon: 'CoffeeOutlined',
    path: '/food',
    component: './Food',
  },
  
  //主要在这个地方配置了子路由list和history
  {
    name: 'material',
    icon: 'HddOutlined',
    path: '/material',
    redirect: '/material/list',
    routes: [
      {
        name: 'list',
        path: '/material/list',
        component: './material/list',
      },
      {
        name: 'history',
        path: '/material/history',
        component: './material/history',
      },
      {
        component: './404',
      },
    ],
  },
  
  {
    name: 'takeout',
    icon: 'SendOutlined',
    path: '/takeout',
    component: './Takeout',
  },
  {
    path: '/login',
    layout: false,
    component: './Login',
    routes: [
      {
        component: './404',
      },
    ],
  },
  {
    component: './404',
  },
];

这个时候左侧菜单栏路由显示正常，但是访问路径后却没有显示内容

后来我把

redirect: '/material/list',

删掉以后，两个页面就正常显示出来了

但是又出现了一个问题，如果我访问/material的话它会跳到404页面，这不是我希望的，希望出现的应该是访问/material跳到/material/list，这也是我一开始写redirect语句的原因，后来我思考了一下，把它改成了这样：

{
    name: 'material',
    icon: 'HddOutlined',
    path: '/material',
    // redirect: '/material/list',
    routes: [
      {
        name: 'list',
        //这里让list的路径直接变成/material
        path: '/material',
        component: './material/list',
      },
      {
        name: 'history',
        path: '/material/history',
        component: './material/history',
      },
}

后来写另一个相似的路由的时候发现这样写控制台会报错

说的应该是不能定义重复的路径，最后改成了这样：

{
    name: 'material',
    icon: 'HddOutlined',
    //删掉下面这句
    //path: '/material',
    routes: [
      {
        name: 'list',
        //这里让list的路径直接变成/material
        path: '/material',
        component: './material/list',
      },
      {
        name: 'history',
        path: '/material/history',
        component: './material/history',
      },
}

就可以正常显示了，但是如果直接定义到/material路径的话又不会有内容，不知道这个问题怎么解决

如果大家有更好的方法欢迎留言讨论~