React-router v7 配置 Suspense+lazy fallback第二次不显示

最近这个项目为了使用户交互更加友好，每个页面路由都采用了lazyload的方式进行加载，分离js以使按需进行加载，其中，我将 Suspense 封装进入了一个函数，通过函数返回对应内容：

export const LazyImport: React.FC<{ lazy: LazyExoticComponent<ComponentType> }> = ({ lazy: Component }) => {
  return (
    <Suspense fallback={<PageLoader />}>
      <Component />
    </Suspense>
  );
};
export const appRouters: RouteObject[] = [
  {
    path: 'dashboard',
    element: <LazyImport lazy={lazy(() => import('@/pages/Dashboard'))} />,
  },
  {
    path: 'order',
    element: <LazyImport lazy={lazy(() => import('@/pages/Order/order'))} />,
  }
]

之前的效果是这样：在第一次进入仪表盘页面，关于仪表盘页面的PageLoader组件会在合适的区域显示出来，但是，切换到其他页面的时候，PageLoader组件将不会在加载过程中展示。

原本的思路很简单，将重复的代码进行统一的的实现，其他地方就可以使用了，错就错在没有过多的考虑React渲染模式，对于React来说，组件的相同会导致其更新时尝试复用组件（节省开销），就像是我们循环遍历出来新的动态组件一样，我们要保持循环出来的每个组件都是全新的话，就需要给每一个组件添加一个不同的 key，这样的话，React在进行渲染的时候，每个LazyImport组件都是全新的，而不是复用旧的。

给每次调用LazyImport都加个不同的Key：

let _suspenseKey = 0;
export const LazyImport: React.FC<{ lazy: LazyExoticComponent<ComponentType> }> = ({ lazy: Component }) => {
  _suspenseKey++;
  return (
    <Suspense key={_suspenseKey} fallback={<PageLoader />}>
      <Component />
    </Suspense>
  );
};

完美解决

这个问题说简单也简单，就是脑袋里默认会觉得这么小的事情应该不会影响到这个，所以在遇到这种问题的时候往往第一时间想不到是这个，细心很重要。

作者近期使用React和Nest做了个开源的ERP/CRM系统在Github（https://github.com/luutuu/luutuu-erp）

欢迎各位通过以下方式一起交流

• github 的 issue
• 邮箱联系 lutultd@163.com