首先确定业务场景如果我们设定场景开发一个PC端管理后台，那么一个很常见的需求就是根据不同的用户配置不同的权限，显示不同的菜单项渲染不同的路线。谁负责权限？一般来说都是在后台配置权限，然后驱动前端显示菜单，但是我觉得这样不好。添加菜单需要在后台申请，太不灵活和费力。我觉得也应该给前台一定的权限，让它“绕过”后台去支配一些菜单项和路由项的渲染，前端为辅。基于以上分析，制定了解决方案。首先列出“外观角色”：动态结构数据：前后台协同创建的数据，描述的是树状关系。静态内容数据：渲染路由和菜单项的基本数据信息。Menuitemsandtheirassociatedroutes：根据上述数据驱动显示。静态内容配置主要由两个成员组成：路由配置：routesMap菜单项配置：menusMap两者关联度太高，所以放在一起管理。路由配置：routesMap作用：每条路由都是一个对象，通过注册到routesMap内部可以统一管理。结构：{...{name:"commonTitle_nest",//国际化单元IDicon:"thunderbolt",//antd的图标路径:"/pageCenter/nestRoute",//路径规则exact:true,//是否严格匹配component:lazyImport(()=>import('ROUTES/login')),//componentkey:uuid()//uniqueidentifier}...}单个参数列表：参数类型描述默认值namestring国际化ID_iconstringantd的图标标识符-pathstring路径规则-exactboolean严格匹配falsecomponentstring渲染组件-keystring唯一标识-redirectstring重定向路由地址-searchobject"?="-paramstringnumber"/*"-isNoFormatboolean标识拒绝国际化false基本是在react的基础上扩展的-路由器，保留其配置项。菜单项配置：menusMap作用：左侧显示的每个菜单项都是一个单一的对象，单一菜单的内容与路由对象相关联，通过注册routesToMenuMap进行统一管理。结构：{...[LIGHT_ID]:{...routesMap.lightHome,routes:[routesMap.lightAdd,routesMap.lightEdit,routesMap.lightDetail,],}...}各个参数列表：参数类型描述默认值routesarray转载了路由个体_这个个体主要和路由个体相关，所以它的参数和它基本一致。动态结构配置主要分为两类：__menuLocalConfig.json__：前端期望的驱动数据。__menuRemoteConfig.json__：后端需要的驱动数据。功能：__动静结合，驱动显示__：将两个文件合并为动态数据，停用静态数据（菜单项menusMap）驱动显示菜单项和渲染路由组件。强调：__menuLocalConfig.json__：是动态数据的组件，是“动态”中的“静态”，配置完全由前端主导。__menuRemoteConfig.json__：应该是后台配置和提供的。前端配置数据文件。目的是在后台配置默认配置，不返回数据，模拟mock开发使用。结构体：[...{"menuId":2001,"parentId":1001}...]简单直接的表示结构体的数据集动态配置说明：简单来说，用于驱动菜单项的渲染和routes，不管后台配置权限控制前端还是前端想绕过后端独霸展示，都是一种期待（一种原因）。两者协商组合，用尽可能少的信息描述一个结构（分支），让静态数据对其进行补充（叶子），再用形成的整体去驱动（结果）。快速开始在/src/routes/config.js中注册路由个别位置，示例：/*路由注册数据，新路由配置在这里*/exportconstroutesMap={...templates:{name:"commonTitle_nest",icon:"thunderbolt",path:"/pageCenter/nestRoute",exact:true,redirect:"/pageCenter/light",key:uuid()}...}详情：/routing-related/configuration/static内容配置决定了这个路由个体的“exit”位置同上，li:/*路由匹配菜单的注册数据，这里配置新后台驱动的菜单*/exportconstmenusMap={...[LIGHT_ID]:{...routesMap.lightHome,//“主角”routes:[routesMap.lightAdd,//“配角”routesMap.lightEdit,routesMap.lightDetail,],},...}解决方法：首先，如果这个配置里出现了一个路由个体，就代表它在舞台上（驱动渲染路由），但是有两种出现：类别驱动显示左边的MenuItem是否可以跳转。配置动态结构数据后台配置权限：[{"menuId":1002,"parentId":0},{"menuId":1001,"parentId":0}]前端自定义权限：[{“menuId”：2002，“parentId”：1001}，{“menuId”：2001，“parentId”：1001}，{“menuId”：2003，“parentId”：0}，{“menuId”：2004，“parentId":1002},{"menuId":2005,"parentId":1002}]补充解决：1***和2***分别是后台和前台的命名规范（只要区分就可以了你可以随意选择它们）。很难看出两者的结合描述了一种树状关系，然后激活静态数据来驱动渲染页面的菜单和路由。简单来说：动态数据描述结构，静态数据描述内容，结构与内容相匹配。有就显示，没有问题就没有问题。两者合作驱动显示器。至此配置基本完成，可以直接修改文件进行开发调整，也可以进行可视化操作。配置难调整？拖放操作后自动刷新。自动生成文件menuLocalConfig.jsonmenuRemoteConfig.json总结：就这样，我觉得react的路由开发了很多，也确定了整体方案，供大家参考。项目地址
