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

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

核心问题分析

Modern.js 的路由系统默认提供了两种主要方式：

1. 约定式路由：基于文件系统自动生成路由结构
2. 运行时配置：通过代码动态创建路由

这两种方式在默认情况下是互斥的，当开发者配置了运行时路由后，约定式路由生成的布局组件（如 routes/layout.tsx 中的默认导出组件）将不再生效。这会导致全局 Context.Provider 等包装组件无法正常工作。

解决方案详解

Modern.js 提供了一个强大的运行时插件系统，通过它我们可以实现两种路由方式的完美结合。

1. 保留约定式路由的布局结构

首先，我们仍然需要维护约定式路由的基本结构：

// routes/layout.tsx
export default () => {
  return (
    <CustomRootProviders>
      <Outlet />
    </CustomRootProviders>
  )
}

这个布局组件会作为所有子路由的容器，确保全局状态管理的一致性。

2. 使用运行时插件动态修改路由

通过创建自定义运行时插件，我们可以在保留约定式路由的基础上动态添加或修改路由：

// src/modern.runtime.ts
import { defineRuntimeConfig } from '@modern-js/runtime'
import type { Plugin, RouteObject } from '@modern-js/runtime/router'

const runtimeRoutePlugin: Plugin = {
  name: 'runtime-route-plugin',
  setup: () => ({
    modifyRoutes: (routes: RouteObject[]) => {
      // 在约定式路由的基础上添加自定义路由
      routes[0].children?.push(...getCustomRoutes())
      return routes
    }
  })
} as Plugin

export default defineRuntimeConfig({
  plugins: [runtimeRoutePlugin]
})

3. 关键实现细节

• 路由合并策略：通过 modifyRoutes 钩子获取约定式路由生成的路由树，然后进行修改
• 布局保持：确保动态添加的路由成为主路由的子节点，从而继承布局组件
• 执行顺序：运行时插件的 modifyRoutes 会在约定式路由生成后执行

高级应用场景

模块联邦集成

在微前端架构中，特别是使用模块联邦时，这种方案尤为有用。主应用可以保留核心布局，同时动态加载子应用的路由配置。

权限控制路由

可以根据用户权限动态过滤或添加路由，同时保持全局的布局和状态管理。

注意事项

1. 路由修改时要确保路径的唯一性，避免冲突
2. 动态添加的路由应该作为主路由的子路由，以确保布局生效
3. 生产环境中要注意路由的代码分割和加载性能

总结

通过 Modern.js 的运行时插件系统，我们成功实现了约定式路由与运行时配置的协同工作。这种方案既保留了约定式路由的简洁性，又获得了运行时配置的灵活性，特别适合复杂的企业级应用开发。开发者可以根据实际需求，灵活调整路由结构，同时确保全局状态管理和布局的一致性。