[Feature]: 支持同时使用 约定式路由 和 运行时配置

[tky753]

What problem does this feature solve?

我的项目是基于模块联邦的，路由是从各个remote那里运行时加载过来的，所以必须要用路由运行时配置。
现在用了 运行时配置的话，routes/layout.ts下的 export default () => {...} 会失效，可能是因为这部分是约定式路由才会用到。
那我就不知道应该在哪里写全局Context.Provider了。

What does the proposed API look like?

能否给运行时配置加一个 updateRoutes(参数：约定式路由生成的路由)的方法，使得用户可以同时在约定式路由的基础之上运行时添加自定义路由或者修改自动生成的路由。

[caohuilin]

@tky753 可以来个 example 吗？

[tky753]

@caohuilin 代码示例：

routes/layout.ts

import type { AppConfig, RouterConfig } from '@modern-js/runtime'
import { Outlet, type RouteObject } from '@modern-js/runtime/router'

export const config = (): AppConfig => {
  return {
    router: {
      createRoutes() {
        return [
          ...
        ] as RouteObject[]
      }
    } as RouterConfig
  }
}

// 以下代码失效
export default () => {
  return (
    <>
      <CustomRootProviders>
        <Outlet></Outlet>
      </CustomRootProviders>
    </>
  )
}

[caohuilin]

@tky753 期望是可以通过 createRoutes 添加新的路由，但是发现项目本身的 routes 文件路由失效了，我理解的对吗？

[tky753]

@caohuilin 我看modern.js代码，约定式路由和 运行时配置就是互斥的吧，下面那部分属于约定式路由，如果上面配置了createRoutes就不会走到下面的代码了

[caohuilin]

@tky753 是的，createRoutes 参数是这个逻辑，感觉你的需求可以在 modifyRoutes 中实现

[caohuilin]

在 src/modern.runtime.tsx 中自定义一个 runtime 插件，然后在里面补充一个自己的 router

import { type Plugin, defineRuntimeConfig } from '@modern-js/runtime';
import type { RouteObject } from '@modern-js/runtime/router';
import React from 'react';

const routerCustomPlugin = () =>
  ({
    name: 'router-custom-plugin',
    setup: () => {
      return {
        modifyRoutes: (routes: RouteObject[]) => {
          routes.push({
            path: '/test',
            element: <div>test</div>,
          });
          return routes;
        },
      };
    },
  }) as Plugin;
export default defineRuntimeConfig({
  plugins: [routerCustomPlugin()],
});

[tky753]

@caohuilin 这个好，感觉比运行时配置要实用多了，建议在路由那一页的文档里添加一下这个。

[caohuilin]

@tky753 嗯，运行时插件现在还没有正式对外，稳定了之后，会添加这里的文档的

[tky753]

@caohuilin 我试了一下，发现用modifyRoutes虽然可以在 约定式路由 封装好的路由的基础上添加其他路由。
但后添加的路由和通过 createRoutes创建的路由一样，走不到

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

这段代码。

因为这个root layout代码只能通过约定式路由封装才能生效。
有没有其他地方可以添加 全局Provider？

[caohuilin]

有的，也在刚刚那个自定义插件用 wrapRoot hook 实现

[tky753]

@caohuilin 我发现了，不过我发现我的provider必须在router的provider里面，这个plugin的加载顺序有办法控制吗？

[caohuilin]

在 modifyRoutes 里面的 routes 里面加一下 layout 字段应该就能跑到了

[tky753]

成了，感谢：
routes/layout.tsx

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

modern.runtime.ts

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

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