Ant-design-pro: 菜单选中问题

[WhatAKitty]

@chenshuai2144 估摸着之前改的路径匹配有问题。

getSelectedMenuKeys = (path) => {
    const flatMenuKeys = this.getFlatMenuKeys(this.menus);
    return flatMenuKeys.filter((item) => {
      return pathToRegexp(`/${item}`).test(path);
    });
  }

改成如下：

getSelectedMenuKeys = (path) => {
    const flatMenuKeys = this.getFlatMenuKeys(this.menus);
    return flatMenuKeys.filter((item) => {
      return pathToRegexp(`/${item}(.*)`).test(path);
    });
  }

则正常工作。

[chenshuai2144]

我写个单元测试！
代码比较复杂。好多地方用的都不是统一的

[chenshuai2144]

return pathToRegexp(/${item}(.*)).test(path);
你的路径是什么？
我测试一下。。这个正则应该匹配 item/.any吧

[WhatAKitty]

查了下具体问题，是因为菜单只有一级的缘故，然后，在其下有多级路由造成的。

/${item}(.*)匹配的是item(任意)。我觉得这个是合理的。
本身就是为了找到该路径的最近匹配菜单。

[WhatAKitty]

路径的话，具体如下：
路由：

'/pipeline': {
      component: dynamicWrapper(app, [], () => import('../routes/Pipeline')),
      name: 'Pipeline',
    },
    '/pipeline/list': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Pipeline')),
      name: '流程列表',
    },
    '/pipeline/add': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Add')),
      name: '创建流程',
    },
    '/pipeline/add/basic': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Add/Step1')),
      name: '创建流程-基本信息',
    },
    '/pipeline/add/build-actions': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Add/Step2')),
      name: '创建流程-构建动作',
    },
    '/pipeline/add/result': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Add/Step3')),
      name: '创建流程-完成',
    },
    '/pipeline/:pipelineId/edit': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Add')),
      name: '编辑流程',
    },
    '/pipeline/:pipelineId/edit/basic': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Add/Step1')),
      name: '编辑流程-基本信息',
    },
    '/pipeline/:pipelineId/edit/build-actions': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Add/Step2')),
      name: '编辑流程-构建动作',
    },
    '/pipeline/:pipelineId/edit/result': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Add/Step3')),
      name: '编辑流程-完成',
    },
    '/pipeline/:pipelineId/detail': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Detail')),
      name: '流程详情',
    },
    '/pipeline/:pipelineId/detail/actions': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Detail/Actions')),
      name: '流程动作',
    },
    '/pipeline/:pipelineId/detail/log': {
      component: dynamicWrapper(app, ['pipeline'], () => import('../routes/Pipeline/Detail/Log')),
      name: '流程日志',
    },

菜单：

const menuData = [{
  key: 'dashboard',
  name: 'dashboard',
  path: 'dashboard',
  icon: 'dashboard',
  children: [{
    name: '分析页',
    path: 'analysis'
  }, {
    name: '监视页',
    path: 'monitor',
  }, {
    name: '工作台',
    path: 'workplace',
  }],
}, {
  key: 'pipeline',
  name: 'pipeline',
  icon: 'rocket',
  path: 'pipeline'
}];

[chenshuai2144]

ok，我测试一下

[WhatAKitty]

还有个问题
http://localhost:3001/pipeline/add/basic这个路径直接刷新，面包屑包含四个：

但是，通过http://localhost:3001/pipeline进去重定向到http://localhost:3001/pipeline/add/basic页面后，面包屑只有三个：

原因是，redirect到basic页面的时候，pageheader所在页面已经加载完毕，所以导致面包屑没法显示完全，这个估计需要想一个办法解决这个问题。

[DuduStyle]

@WhatAKitty 不知道我理解的对不，你可以把pageheader分别放到各个子页面上，这样面包屑就可以正常渲染；

[WhatAKitty]

@DuduStyle 不符合代码复用性要求，而且按照规范，这个组件不该与业务耦合。