ClarkXia
commented
3 months ago Open donfo opened 3 months ago
ClarkXia
commented
3 months ago 
donfo
commented
3 months ago 已经尝试过上面这个方案了，当复杂的场景达不到实际routers的config配置的效果。比如多层嵌套路由的缓存问题，还有路由都配置成动态规则/:route1/:route2，如果下发的路由有多个如/a/1，/c/d，想根据route的path判断高亮菜单也没法做。
ClarkXia
commented
3 months ago 你可以 mock 一份路由配置数据，我们尝试写一个 demo 出来
donfo
commented
3 months ago 类似下面这种，路由配置从后端返回，"component": "SchemaForm"会指向同一个页面组件来动态渲染页面。在SchemaForm组件里需要拿到当前匹配路由的配置信息再通过如：path去服务端拿页面表单配置来渲染页面。
[{
"component": "SchemaForm",
"path": "/cloud/manage/system/tree",
"exact": false,
"name": "租户管理-左侧树",
"children": [{
"component": "SchemaForm",
"path": "/cloud/manage/system/tree/tenant_list",
"exact": false,
"name": "租户列表"
}]
},
{
"component": "SchemaForm",
"path": "/cloud/manage/system/:tenantId/config",
"exact": false,
"name": "租户配置中心",
"children": [{
"component": "SchemaForm",
"path": "/cloud/manage/system/:tenantId/config/base",
"exact": true,
"name": "基础设置"
}]
},
{
"component": "SchemaForm",
"path": "/cloud/manage/system/biz",
"exact": false,
"name": "业务管理",
"children": [{
"component": "SchemaForm",
"path": "/cloud/manage/system/biz/add_business",
"exact": true,
"name": "创建(编辑)业务"
}]
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree",
"exact": false,
"name": "组织架构树",
"children": [{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/tenant_tab",
"exact": false,
"name": "租户管理tab"
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_edu_org",
"exact": false,
"name": "组织架构列表",
"children": [{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_edu_org/list_unit_manager",
"exact": true,
"name": "单位管理员"
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_edu_org/org_framework_adjust",
"exact": true,
"name": "单位调整"
}
]
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_org_mem",
"exact": false,
"name": "组织人员列表",
"children": [{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_org_mem/add_org_user",
"exact": true,
"name": "添加-单位用户"
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_org_mem/update_org_user",
"exact": true,
"name": "编辑-单位用户"
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_org_mem/change_org_user",
"exact": true,
"name": "组织变更-单位用户"
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_org_mem/set_role",
"exact": true,
"name": "设置角色"
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_org_mem/leave_mem",
"exact": true,
"name": "移除学员"
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_org_mem/stu_batch_change",
"exact": true,
"name": "学员批量调整"
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_org_mem/stu_excel_import",
"exact": true,
"name": "学员导入"
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/tree/list_org_mem/stu_batch_change",
"exact": true,
"name": "学员批量调整"
}
]
}
]
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/:tenantId/:bizCode/role_tree",
"exact": false,
"name": "角色管理树",
"children": [{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/:tenantId/:bizCode/role_tree/add_role",
"exact": true,
"name": "添加(编辑)角色"
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/:tenantId/:bizCode/role_tree/role_org_tree",
"exact": false,
"name": "组织树",
"children": [{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/:tenantId/:bizCode/role_tree/role_org_tree/user_list",
"exact": false,
"name": "角色用户",
"children": [{
"id": "cl411mvjt33948svbq3ac12iz",
"path": "/cloud/manage/tenant/:tenantId/:bizCode/role_tree/role_org_tree/user_list/add_role_user",
"exact": true,
"name": "新增角色用户"
},
{
"id": "cl7ga9bjn339590isgr1zavwu8",
"path": "/cloud/manage/tenant/:tenantId/:bizCode/role_tree/role_org_tree/user_list/user_selector",
"exact": true,
"name": "成员选择器"
}
]
}]
},
{
"component": "SchemaForm",
"path": "/cloud/manage/tenant/:tenantId/:bizCode/role_tree/permission",
"exact": false,
"name": "权限配置"
}
]
}
]结构上有点复杂，可以尝试新建一个 src/pages/*.ts 来劫持路由，内部通过 Route（直接从 react-router-dom 导入）的方式重新组织路由，参考 https://reactrouter.com/en/main/route/route#index
ice2.0的router可以在modifyRoutes方法里从后端请求路由及配置回来，路由的component通过字符串映射组件的方式直接使用。
请问3.0如何处理？