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',
  },
];

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

ant design pro v5子路由页面不显示的问题_第1张图片

后来我把

redirect: '/material/list',

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

ant design pro v5子路由页面不显示的问题_第2张图片

但是又出现了一个问题,如果我访问/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',
      },
}

ant design pro v5子路由页面不显示的问题_第3张图片
后来写另一个相似的路由的时候发现这样写控制台会报错
ant design pro v5子路由页面不显示的问题_第4张图片
说的应该是不能定义重复的路径,最后改成了这样:

{
    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路径的话又不会有内容,不知道这个问题怎么解决

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

你可能感兴趣的