Modern.js 中约定式路由与运行时配置的混合使用实践

Modern.js 作为一款现代化的前端开发框架，提供了强大的路由管理能力。在实际开发中，我们经常会遇到需要同时使用约定式路由和运行时动态配置路由的场景。本文将深入探讨如何在这两种路由模式下实现灵活的组合使用。

核心问题分析

在基于模块联邦架构的项目中，路由通常需要从远程模块动态加载，这就要求必须使用运行时配置路由。然而，当启用运行时配置后，约定式路由中的布局组件（如 routes/layout.ts）会失效，导致无法正常使用全局 Context.Provider 等包装组件。

解决方案探索

Modern.js 提供了运行时插件机制来解决这一问题。通过自定义运行时插件，我们可以在保留约定式路由的基础上，动态修改或扩展路由配置。

基本实现方式

1. 保留约定式路由布局
   在 routes/layout.ts 中保持原有的布局组件定义：

   export default () => {
     return (
       <CustomRootProviders>
         <Outlet />
       </CustomRootProviders>
     )
   }
   

2. 创建运行时插件
   在 modern.runtime.ts 中定义自定义插件：

   const runtimeRoutePlugin: Plugin = {
     name: 'runtime-route-plugin',
     setup: () => ({
       modifyRoutes: (routes: RouteObject[]) => {
         routes[0].children!.push(...getCustomRoutes())
         return routes
       }
     })
   }
   

高级技巧

1. 全局 Provider 注入
   如果需要在路由 Provider 内部包装自定义 Provider，可以使用插件的 wrapRoot 钩子：

   setup: () => ({
     wrapRoot: (root) => (
       <CustomRootProviders>
         {root}
       </CustomRootProviders>
     )
   })
   

2. 路由层级控制
   通过修改 routes 数组的结构，可以精确控制路由的嵌套层级：

   modifyRoutes: (routes) => {
     const newRoute = {
       path: '/dynamic',
       element: <DynamicLayout />,
       children: getDynamicRoutes()
     }
     routes.push(newRoute)
     return routes
   }
   

最佳实践建议

1. 约定式路由为主
   建议以约定式路由作为基础架构，仅在需要动态加载的部分使用运行时配置。

2. 保持路由结构清晰
   动态添加的路由应保持与约定式路由相似的结构，便于维护。

3. 合理使用布局组件
   对于需要特殊布局的动态路由，可以在路由配置中单独指定布局组件。

4. 性能优化
   动态加载的路由应考虑代码分割和懒加载，避免影响首屏性能。

通过这种混合使用方式，开发者既能享受约定式路由的便利性，又能获得运行时配置的灵活性，完美适应模块联邦等复杂场景的需求。