如何基于URL加载对应目录App组件实现React多入口应用

实现思路 #

• 用React Router动态路由匹配URL中的合作商标识段
• 配合React.lazy做动态导入与代码分割，仅加载当前访问的partner对应的App组件
• 新增加载状态与错误处理逻辑覆盖异常场景

完整重构代码 #

import React, { Suspense, lazy } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';

// 错误边界组件，处理组件加载失败的情况（比如partner不存在）
class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) {
      return <h1>无效的访问路径</h1>;
    }
    return this.props.children;
  }
}

// 动态加载对应partner App组件的逻辑
const DynamicApp = () => {
  const { partner } = useParams();
  // 路径前缀必须写死，确保打包工具能正确扫描目录生成代码块
  const PartnerApp = lazy(() => import(`./context/${partner}/App.js`));
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>加载中...</div>}>
        <PartnerApp />
      </Suspense>
    </ErrorBoundary>
  );
};

const renderApp = () => {
  return (
    <Routes>
      {/* 匹配所有/xxx格式的路径，提取partner参数，末尾*支持partner内部嵌套子路由 */}
      <Route path="/:partner/*" element={<DynamicApp />} />
      {/* 根路径或者其他未匹配路径的兜底 */}
      <Route path="*" element={<h1>请访问正确的合作商路径</h1>} />
    </Routes>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      {renderApp()}
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

注意事项 #

• 主流脚手架（CRA、Vite等）默认支持该动态导入语法，无需额外配置
• 导入路径的./context/前缀必须写死，不能全部用变量替代，否则打包工具无法识别需要拆分的代码文件
• 如果是React 18版本，只需把ReactDOM.render的部分替换为createRoot的写法即可，逻辑完全复用

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