如何结合React Lazy与路由实现组件Props传递？

要在React路由中同时实现组件懒加载和传递props，你可以结合React.lazy和Suspense，在路由的component函数中直接渲染懒加载组件并传入参数，具体方案如下：

方案一：提前定义懒加载组件并传参 #

先全局定义懒加载组件，再在路由的component回调里用Suspense包裹并传递props：

import React, { lazy, Suspense } from 'react';

// 提前声明懒加载组件
const LazyTestComponent = lazy(() => import('pages/test/TestComponent/index'));

export const routes = [
  // ...其他路由配置
  {
    path: '/test/testComponent',
    exact: true,
    component: () => (
      // Suspense必须配合lazy使用，提供加载时的占位内容
      <Suspense fallback={<div>加载中...</div>}>
        <LazyTestComponent myProps="hello" />
      </Suspense>
    ),
  },
  // ...其他路由配置
];

方案二：路由内直接动态导入并传参 #

如果不需要全局复用懒加载组件，也可以直接在路由的component函数内部完成导入：

import React, { lazy, Suspense } from 'react';

export const routes = [
  // ...其他路由配置
  {
    path: '/test/testComponent',
    exact: true,
    component: () => {
      const TestComponent = lazy(() => import('pages/test/TestComponent/index'));
      return (
        <Suspense fallback={<div>加载中...</div>}>
          <TestComponent myProps="hello" />
        </Suspense>
      );
    },
  },
  // ...其他路由配置
];

传递动态参数 #

如果需要传递动态props（比如路由参数、全局状态等），可以通过component的回调参数获取后传入：

component: (routeProps) => (
  <Suspense fallback={<div>加载中...</div>}>
    <LazyTestComponent 
      myProps={routeProps.match.params.testParam} 
      otherProp={someGlobalState}
    />
  </Suspense>
)

关键注意事项 #

• 如果组件是命名导出而非默认导出，需要调整导入语句：

  const LazyTestComponent = lazy(() => 
    import('pages/test/TestComponent/index').then(module => ({ default: module.TestComponent }))
  );
  

• Suspense是必须的，否则组件加载过程中会抛出错误，fallback可以替换为任意React元素（比如加载动画、骨架屏）。

内容的提问来源于stack exchange，提问作者SungHun Jung