咨询：React Router v4中React-Loadable实现无替换加载的代码分割方案

当然可以用react-loadable实现你想要的效果！你需要的是加载过程中保留已渲染的内容，只更新组件状态而非替换整个视图——这完全可以通过自定义react-loadable的loading组件逻辑来做到。

具体实现步骤 #

1. 自定义Loading高阶组件 #

创建一个自定义的Loading处理组件，它不会替换原有内容，而是将加载/错误状态传递给被包裹的子组件：

import React from 'react';

const CustomLoadingHandler = ({ isLoading, error, children }) => {
  // 加载中：给子组件传递isLoading状态，不替换原有内容
  if (isLoading) {
    return React.cloneElement(children, { isLoading: true });
  }
  // 加载出错：传递错误状态
  if (error) {
    return React.cloneElement(children, { loadError: error });
  }
  // 加载完成：直接渲染子组件
  return children;
};

2. 用react-loadable包装目标组件 #

用这个自定义的Loading组件配置你的Loadable包装器，同时可以设置delay避免短时间加载的状态闪烁：

import Loadable from 'react-loadable';
import LoaderStripComponent from './LoaderStripComponent.jsx';
// 假设你的目标组件是Stage3Component
const LoadableStage3 = Loadable({
  loader: () => import('./Stage3Component'),
  loading: CustomLoadingHandler,
  delay: 200, // 延迟200ms再触发加载状态，避免快速加载时的闪烁
});

3. 在目标组件中处理加载状态 #

在Stage3Component内部接收传递来的isLoading状态，仅在原有内容基础上添加加载提示（比如你的LoaderStripComponent），而不是替换整个视图：

// Stage3Component.jsx
const Stage3Component = ({ isLoading, loadError }) => {
  if (loadError) {
    return <div>加载失败：{loadError.message}</div>;
  }

  return (
    <div className="stage-container">
      {/* 保留你原本的组件内容 */}
      <div className="your-existing-content">
        {/* ...原有渲染内容... */}
      </div>
      {/* 仅在加载中显示状态条，不替换原有内容 */}
      {isLoading && <LoaderStripComponent />}
    </div>
  );
};

export default Stage3Component;

替代方案：React内置的React.lazy + Suspense #

如果你不想依赖react-loadable，React自带的React.lazy和Suspense也能实现类似效果，需要结合状态管理来控制加载提示：

import React, { useState, Suspense } from 'react';
import LoaderStripComponent from './LoaderStripComponent.jsx';

const LazyStage3 = React.lazy(() => 
  import('./Stage3Component')
    .then(module => {
      // 加载完成后更新状态
      setIsLoading(false);
      return module;
    })
    .catch(err => {
      setLoadError(err);
      return err;
    })
);

const Stage3Wrapper = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [loadError, setLoadError] = useState(null);

  if (loadError) {
    return <div>加载失败：{loadError.message}</div>;
  }

  return (
    <div className="stage-container">
      {/* 保留原有内容 */}
      <div className="your-existing-content">...</div>
      {/* 加载状态提示 */}
      {isLoading && <LoaderStripComponent />}
      {/* Suspense用空fallback避免替换视图 */}
      <Suspense fallback={<></>}>
        <LazyStage3 />
      </Suspense>
    </div>
  );
};

总结 #

react-loadable完全能满足你的需求，核心是自定义loading组件的逻辑，不渲染替代视图而是传递状态。React内置方案也可行，但需要额外处理加载状态的监听。

内容的提问来源于stack exchange，提问作者Utkarsh Sopan