React v18.x 在 react-router v6 使用 lazy 动态加载组件实现

import GlobalLoading from '@main/components/global-loading/global-loading';
import React, { LazyExoticComponent } from 'react';

export const LazyImportComponent = (props: {
  lazyChildren: LazyExoticComponent<() => JSX.Element>;
}) => {
  return (
    <React.Suspense fallback={<GlobalLoading />}>
      <props.lazyChildren />
    </React.Suspense>
  );
};

import { Navigate,RouteObject } from 'react-router-dom';
import React from 'react';
import { LazyImportComponent } from '@main/components/lazy-import-component';
const DashboardLazy = React.lazy(() => import('./dashboard'));
export const DashboardRouter: RouteObject = {
  path: '/dashboard',
  element: <LazyImportComponent lazyChildren={DashboardLazy} />
};