使用高阶组件配合Suspense实现页面加载loading

<Suspense>

<Suspense> 允许在子组件完成加载前展示后备方案。

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

高阶组件

本质就是函数，传来一个组件，返回一个新组件，从而增强组件功能（类似于手机壳，包裹之后会变化）

高阶函数(本身就是函数)：reduce\map\forEach 1.把函数当作形参 2.返回一个函数

高阶组件实现

1.创建一个函数

2.指定函数参数，参数中传入一个组件

3.在函数中创建一个类组件或者函数组件

高阶组件常见的使用场景：

1. 进行权限控制

2. 访问统计

3. 统一布局

缺点：增加层级，影响性能

const withLoadingComponent = (comp) => <React.Suspense fallback={<Loading />}>{comp}</React.Suspense>
// hash 模式
export const router = createHashRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        element: withLoadingComponent(<Home />)
      },
      {
        path: 'overview',
        name: '全景',
        element: withLoadingComponent(<Home />)
      },
      {
        path: 'business',
        name: '经营',
        element: withLoadingComponent(<BusinessLayout />),
        children: [
          {
            index: true,
            element: withLoadingComponent(<BusinessOverview />)
          },
          {
            path: 'business_overview',
            name: '总览',
            element: withLoadingComponent(<BusinessOverview />)
          },
          {
            path: 'clients_business',
            name: '客户经营',
            // element: withLoadingComponent(<ClientsBusiness />)
            element: withLoadingComponent(<NoData type="building" />)
          },
          {
            path: 'clients_experience',
            name: '客户体验',
            element: withLoadingComponent(<ClientsExperience />)
          }
        ]
      },
      {
        path: 'experience',
        name: '体验',
        element: withLoadingComponent(<Experience />)
      },
      {
        path: 'efficiency',
        name: '效率',
        element: withLoadingComponent(<Efficiency />)
        // element: withLoadingComponent(<NoAuth type="building" />)
      },
      {
        path: 'risk',
        name: '风险',
        element: withLoadingComponent(<Risk />)
        // element: withLoadingComponent(<NoAuth type="building" />)
      }
    ]
  },
  {
    path: 'guide',
    element: withLoadingComponent(<Guide />)
  },
  {
    path: '404',
    element: withLoadingComponent(<NoAuth type="404" />)
  },
  {
    path: 'noAuth',
    element: withLoadingComponent(<NoAuth />)
  },
  {
    path: '*',
    element: <Navigate to="/404" />
  }
])