antd-pro的路由生成的菜单高亮逻辑问题

Question

1. 路径为/app/a/b时，/app和/app/a高亮：
   
2. 路径为/app/c时，/app高亮，且/app有展开动作：
   
3. 路径为/app/d时， /app、/app2高亮，且/app有展开动作：
   
4. 路径为/app2/e时，/app、/app2高亮，且/app2有展开动作：
   

routers.js配置如下，逻辑上来看是框架会根据配置的层级关系和path的地址共同计算出它所认为的层级关系。
不知道这个能不能只限制为配置的逻辑，不要受到path的值去影响逻辑？

[
  {
    name: "/app",
    path: "/app",
    exact: true,
    routes: [
      {
          name: "/app/a",
          path: "/app/a",
          exact: true,
          component: './Welcome',
      },
      {
          name: "/app/a/b",
          path: "/app/a/b",
          exact: true,
          component: './Welcome',
      },
      {
          name: "/app2/e",
          path: "/app2/e",
          exact: true,
          component: './Welcome',
      },
    ]
  },
  {
      name: "/app/c",
      path: "/app/c",
      exact: true,
      component: './Welcome',
  },
  {
    name: "/app2",
    path: "/app2",
    exact: true,
    routes: [
      {
          name: "/app/d",
          path: "/app/d",
          exact: true,
          component: './Welcome',
      },
    ]
  }
]

Answer 1

自带的逻辑确实有这个问题，估计是因为考虑到url可能带参数的原因所以匹配的时候不是全等匹配的（就是正则没有用$结尾）造成的结果。

但是，这个问题在正常使用中基本不造成影响。而你的代码属于低级练习级别，这个问题就凸显出来了。
那么，为什么说正常使用中基本不造成影响呢，因为url，尤其是菜单是要考虑SEO的，所以基本不可能出现'/app/a','/app/b'这种名字，包含嵌套关系也是如此（就是不会出现app/a菜单的子项包含app/a/a和app/b/a这种情况）。

所以，意见是学会就好，不用纠结这个问题了。实在想解决就利用暴露出来的menuRender等属性自定义菜单渲染吧。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。