[Feature Request] 类似 remix 组装式接入方案

[xierenyuan]

解什么

期望通过 组装式的方式 解决 配置的易读性及提供渐进式接入的能力, 除挂载之外的能力 全部通过组件或者 react-hooks 的形式暴露给用户 提供用户可定制的能力, 同时从理解成本上 比直接在 app.tsx 直接导出一个 rootContainer 更易于用户理解。(只是增项原有插件及运行时能力不需要修改, 用户定义在app.tsx 中的内容不需要变更)

使用

新增约定式文件 root.tsx 不在 app.tsx 增加的原因是 app.tsx 的 default 导出已用于实现 defineApp

完全按需组装

import { RootContainer, InnerProvider, AccessProvider, UmiBrowserRoutes } from 'umi';

function Layout ({ children }) {
   return (
    <div className="umi-app">
      { children }
    </div>
   )
}

export default function Root () {
   return (
    <Layout>
      <RootContainer>
        <InnerProvider>
          <AccessProvider>
             <UmiBrowserRoutes/>
          </AccessProvider>
        </InnerProvider>
      </RootContainer>
    </Layout>
   )
}

运行时 把 rootContainer, i18nProvider 之类的合为一个组件 UmiRootContainer

import { UmiRootContainer, UmiBrowserRoutes } from 'umi';

function Layout ({ children }) {
   return (
    <div className="umi-app">
      { children }
    </div>
   )
}

export default function Root () {
   return (
    <Layout>
      <UmiRootContainer>
         <UmiBrowserRoutes/>
      </UmiRootContainer>
    </Layout>
   )
}

仅使用 umi 运行时 顶层路由部分自己实现 比如使用 react-router v5 版本

// root.tsx
import { UmiRootContainer } from 'umi';
import BrowserRoutesV5 from './browserRoutesV5'

function Layout ({ children }) {
   return (
    <div className="umi-app">
      { children }
    </div>
   )
}

export default function Root () {
   return (
    <Layout>
      <UmiRootContainer>
         <BrowserRoutesV5/>
      </UmiRootContainer>
    </Layout>
   )
}

// browserRoutesV5.tsx
import { useAppData } from 'umi'
export function BrowserRoutesV5 () {
   const { clientRoutes } = useAppData();

   // 省略实现
}

[xiaohuoni]

看起来只是为了修改 BrowserRoutes 的话，是不是可以通过 api.modifyRendererPath 覆盖？

[xierenyuan]

实现了下 demo 现在的思考有点问题 先关闭了 想清楚在打开