AppRouter props ts校验

[catcheesetail]

Type '{ children: Element[]; ErrorComponent: Element; NotFoundComponent: () => Element; LoadingComponent: any; onRouteChange: (pathname: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly, "shouldAssetsRemove"> & InexactPartial<...> & InexactPartial<...>'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly, "shouldAssetsRemove"> & InexactPartial<...> & InexactPartial<...>'.ts(2322)

<AppRouter
      NotFoundComponent={NotFound}
      LoadingComponent={PageLoading}
      onRouteChange={handleRouteChange}
    >
...
</AppRouter>

[ClarkXia]

是否可以提供相关代码，包括 NotFound / PageLoading 等实现

[gmqiyue]

是否可以提供相关代码，包括 NotFound / PageLoading 等实现

我这边也出现类似错误，下面是整个Layout.tsx的代码

import { AppRoute, AppRouter } from '@ice/stark';
import { App } from 'antd';
import { useEffect } from 'react';
import { Link, Outlet } from 'umi';

import styles from './index.less';

const getAppConfig = (): React.ComponentProps<typeof AppRoute>[] => {
  return [
    {
      activePath: '/subapp',
      name: 'subapp',
      title: 'SubApp',
      url: [
        'https://abc.com/subapp/js/index.js',
        'https://abc.com/subapp/css/index.css',
      ],
      sandbox: true,
      scriptAttributes: ['crossorigin=anonymous'],
      props: {
        env: 'pre',
      },
    },
  ];
};

export default function Layout() {
  return (
    <App>
      <div className={styles.navs}>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/docs">Docs</Link>
          </li>
          <li>
            <Link to="/subapp">SubApp</Link>
          </li>
        </ul>

        <AppRouter
          onAppLeave={(appConfig) => {
            console.log('onAppLeave::appConfig', appConfig);
          }}
        >
          {getAppConfig().map((appConfig) => (
            <AppRoute key={appConfig.name} {...appConfig} />
          ))}

          {/* fallback 除了上述SubApp路由外的都交给当前主程序渲染 */}
          <AppRoute activePath="*" render={() => <Outlet />} />
        </AppRouter>
      </div>
    </App>
  );
}

[gmqiyue]

虽然这个ts错误不影响程序的运行，但有些膈应～😂

[gmqiyue]

似乎找到原因了，是packages/icestark/src/AppRouter.tsx的AppRouterProps类型没有声明children属性

改成 React.PropsWithChildren<AppRouterProps>就能解决。我将提交一个PR以解决该问题。