Ant-design-pro: About router/menu config

[ddcat1115]

目前，脚手架中路由和导航 Menu 的生成，以及不同层级组件的渲染都是依靠 nav.js 中的配置信息，这样主要存在两个问题：

• 理论上路由应该和组件渲染没有直接关系，路由 path 并不一定代表 ui 层级，比如：/user/info 并不一定需要在 /user 对应的 layout/组件 中渲染，两个路由在ui上并不是 parent 和 children 的关系，但目前这两个绑在了一起。
• 路由和 Menu 并不一定是一一对应的，Menu 很容易出现个性化的需求，比如某个层级不展示，或者需要在不同地方分别展示不同导航层级，当需求稍微复杂一点时，共用一份配置信息有诸多限制。
• 目前的方式不太符合 react-router@4 的风格，也在一定程度上限制了它的灵活性。

所以在 1.0 发布前，考虑这部分是否可以进行重构，大致的构想是：

• 配置信息只会用来生成路由，且不再是树状，而是打平的，类似下面这样（不完整）：

  {
      "/": {
          "name": "首页",
          "component": Home,
      },
      "/user": {
          "name": "用户",
          "component": UserLayout,
      },
      "/user/userlist": {
          "name": "用户列表",
          "component": UserList,
          "model": ["user", "loading"],
          "auth": ["admin"],
      },
      "/user/userlist/:id": {
          "name": "用户详情",
          "component": UserDetail,
          "model": ["user", "loading"],
          "auth": ["admin"],
      },
  }
  

• 具体 ui 渲染层级由具体组件代码决定，和配置信息无关。可以提供相应的工具函数方便从配置信息中获取相关参数，如 UserLayout.js 中可以这样写：

  <div class="content">
      {getRoute('/user/userlist')}
      {getRoute('/user/userlist/:id')}
  </div>
  

  会生成带上相关配置信息的 Route

• Menu 导航不再根据配置信息生成，可以自己手动构建，或另外维护一份 Menu 信息用来生成导航。

大家看下是否可行~

[chenshuai2144]

378 这样做这个问题也会修复把.

[zinkey]

👍

[ddcat1115]

@chenshuai2144 是的，这样子menu key和页面 path无关

[chenshuai2144]

页头的面包屑 根据什么生成？？
我觉得根据Meun比较合适。。
路由的参数并不合适显示在面包屑中

[afc163]

且不再是树状，而是打平的

这样和 react-router 的理念就冲突了，一旦需要修改路径，所有的都要改一遍。

[afc163]

理论上路由应该和组件渲染没有直接关系

实际上路由和组件渲染应该有继承关系。

[afc163]

Menu 单独配置我是支持的，路由不要自创一套配置，这样 react-router 的 API 都没法用了。

[afc163]

面包屑会如何变化，是跟着路由走还是跟着菜单信息走。

[chenshuai2144]

@afc163 react-router 本身就是要去中心化的.
继承关系可以通过path来规定 不一定需要子节点.
不然 #378 还是出现

[afc163]

现在这个方式还是中心配置化的。

PS：#378 的问题现在就可以通过拼合父级的路径来解决。

[chenshuai2144]

面包屑应该跟着菜单走..

我最近碰上了这个尴尬的问题.
要是跟着菜单走更加方便.

[LayGit]

路由绑定 Menu 确实存在诸多限制，扁平的结构是更加灵活，但是感觉对 面包屑 这种需要层级关系的组件可能就没那么友好，如何平衡取舍值得思考
@chenshuai2144 面包屑应该根据路由配置生成，比如 编辑页、详情页 这些可能是从列表跳转过去的页面，并不显示在菜单中，但是路由配置里面肯定是有

[afc163]

Menu 导航不再根据配置信息生成，可以自己手动构建，或另外维护一份 Menu 信息用来生成导航。

有一个副作用可能要考虑，就是面包屑的中文和菜单的中文，很可能需要维护两份相同的文案。

现在是用路由配置信息的 name 属性来直接生成菜单和路由，实际上加一个类似 showInMenu 的配置来决定是否要在菜单上展现应该就够了。

[chenshuai2144]

如果是这样 那时候还需要加一个默认页面的选项..
我希望 /user 自动跳转到/user/list,现在是无法做到的.

[afc163]

是可以的 https://github.com/ant-design/ant-design-pro/blob/002785190e49ad32e8c590351ff47f288eb9b778/src/layouts/BasicLayout.js#L366

[chenshuai2144]

菜单第二项,表单页就不能做到.
如果能配置 #343 这个问题就可以解决掉,
不用 禁用掉.面包屑的跳转逻辑了.

[LayGit]

可以在 /user 对应的 layout 中配置

<Redirect exact from="/user" to="/user/list" />

[zinkey]

路由跟 ui 的关系，应该在组件内部去实现。要是一开始定义好了其实就是3的用法用4来实现。

路由只需要配置 path 跟 component 对应，至于在哪里去 match 这个则是在组件里去决定。

[chenshuai2144]

@LayGit 那要配置很多很的. 如果像阿里云有十几个meun
那工作量可不小.

[ddcat1115]

@chenshuai2144 我觉得面包屑应该跟路由走，原因 @LayGit 有提到，实际上我觉得打平的配置信息和 react-router@4 版的 Breadcrumb 可以更方便的结合使用

[ddcat1115]

这样和 react-router 的理念就冲突了，一旦需要修改路径，所有的都要改一遍。
实际上路由和组件渲染应该有继承关系。

@afc163 我觉得只有当把某个 Route 写在另一个 Route 对应的组件内部的时候，这两个组件才真正有继承关系，这点不能仅靠字面上的路由来判定，比如 /user/list 只有写在 /user 内部时，他们的父子关系才成立，但目前的配置树，如果想生成这两个路由地址，只能把前者作为后者的 children。而且 router4 的风格更灵活，可以随意在哪定义并渲染路由（组件），路由并不一定只能由层层嵌套的组件对应的 path 组成，也就是说树状配置不能完全覆盖路由需求。但一旦修改，相关路由名称可能都需要修改这个问题确实存在的，不过因为路由还是有这个集中化配置的文件，所以应该不大会遗漏。

Menu 单独配置我是支持的，路由不要自创一套配置，这样 react-router 的 API 都没法用了。

路由的配置大体上会和 route 能接受的参数保持一致，除了需要额外添加的类似 name（面包屑用），auth（权限管理）等特殊配置

有一个副作用可能要考虑，就是面包屑的中文和菜单的中文，很可能需要维护两份相同的文案。

这个问题确实存在，可以再想点办法

[chenshuai2144]

+1 面包屑跟着菜单最好。。
路由有时候还带了参数，参数并不想体现在面包屑中。

但是我觉得没必要维护两份配置文件。可以通过参数来进行设置！

[ddcat1115]

路由的配置信息里可以包含 name，给面包屑用，面包屑和菜单肯定不是一一对应的，面包屑很可能包含不在菜单里展示的条目，跟菜单不太合适。

[kunhour]

我最新的项目已经自使用Pro了，谈一下个人看法：
In my opinion: 导航还是中心配置化的好一些，面包屑跟着理由走比较合适。
路由和导航如果分开配置，需要增加导航和路由关系配置，不方便我调整路由；
面包屑的显示随着路由变化，比如详情页面在导航是没有对应的，如果按照菜单又该显示哪一个菜单呢。。。
期望增加: 路由是否和导航对应的参数配置。

[zinkey]

路由是否和导航对应的参数配置

这个配置是比较不好实现的。因为路由跟导航本来是没有一一对应关系的。如果要配置，就需要设置哪些路由有导航，哪些没有；哪些会根据权限出现，哪些不是等很多配置。

更好的做法是导航来配置需要的路由。一个项目的路由是可以看成一个资源，可以被导航来使用。不同的项目可以根据需要做不同的使用方式。

[chenshuai2144]

如果能捋清楚 路由和导航谁是谁的子集。那么配置文件就比较好做。如果两个只是有一部分相同 各自又有不同的地方就比较麻烦了

[kunhour]

@chenshuai2144 同意这种说法，只是，目前在实际项目中使用来看，只是有一部分相同 各自又有不同,比较麻烦，中心化配置可能需要增加"冗余"参数来解决。

[wupinlang]

请问现在可以用"/user/userlist/:id"这种path吗？写了之后好像菜单项不能显示选中状态

[chenshuai2144]

@wupinlang 正在讨论这个问题. 如果着急想用,可以试试react-router 的state

[WhatAKitty]

我倾向于：

1. 路由中心化配置，跟目前的类似，都放置在nav或者某个router文件内；
2. 菜单另起一个配置或者直接抽象为一个单独的菜单组件。因为像@ddcat1115所说，路由跟菜单并不对等，甚至结构层次完全不一致的情况；
3. 面包屑中的配置最好能够跟着菜单走，不然容易出现 #343 的问题情况。

把什么都放在同一个文件，我觉得是最大的不合理处。

[wupinlang]

@chenshuai2144 多谢回复。现在的nav确实有些不好用的地方，我比较赞成@WhatAKitty 说的3点

[chenshuai2144]

@WhatAKitty
我也赞成 ,但是会造成配置文件冗余...
没有两全其美的解决办法.
最后变得和java一样.写软件就是写xml就不大好了.

[WhatAKitty]

并不觉得冗余，本来就是两个不同的配置，硬要将其合并，反而不美。

[CrewS]

请问一下，nav.js里的配置信息 如何进行国际化处理，之前看到的demo都是组件内的数据处理，这种配置类信息的处理好像没有例子

[lucaslz2020]

我现在想根据一些条件，动态生成不同的菜单（比如不同的角色），菜单名称不一样（内容一样），不知道该从哪里下手。

[chenshuai2144]

fix in #442

[WhatAKitty]

@ddcat1115 最新的route代码有个问题，当menu和router的层级不一致的时候，menu的菜单不会被选中。比如将列表的子菜单去除：

{
    name: '搜索列表',
    path: 'search',
  }

在点击tab后，搜索列表并不会被高亮选中。

有什么办法可以解决这个问题？

[ddcat1115]

@WhatAKitty 去掉子菜单后这样配置：

{
  name: '列表页',
  icon: 'table',
  path: 'list',
  children: [{
    name: '查询表格',
    path: 'table-list',
  }, {
    name: '标准列表',
    path: 'basic-list',
  }, {
    name: '卡片列表',
    path: 'card-list',
  }, {
    name: '搜索列表（文章）',
    path: 'search/articles',
  }, {
    name: '搜索列表（项目）',
    path: 'search/projects',
  }, {
    name: '搜索列表（应用）',
    path: 'search/applications',
  }],
}

[ddcat1115]

路由和菜单已改造完成，最新文档

[afc163]

{
  /: {
    component: ƒ,
    name: undefined
  },
  /dashboard/analysis: {
    component: ƒ,
    name: "分析页"
  },
  /dashboard/monitor: {
    component: ƒ,
    name: "监控页"
  },
  /dashboard/workplace: {
    component: ƒ,
    name: "工作台"
  },
}

undefined 和 f 好奇怪。

[chenshuai2144]

突然有个想法，要写配置文件，不如注解一下算了。
@GetMapping("/pets/{petId}")
就直接在meun 和 router里面添加了

[afc163]

@chenshuai2144 👍，不过不建议在现有的基础上小修小补，可以基于这个想法尝试整体设计一个应用框架。

[chenshuai2144]

脑子里有个雏形 我应该做成独立的组件,方便升级.
代码分割估计麻烦了

[chenshuai2144]

这个可以关了

[hudawen]

@afc163 请问 #378 的问题怎么个拼合父级路径法？

[hudawen]

@afc163 如何拼合父级才能避免影响当前页面的pathname呢