React Router + Module Federation：自定义路由组件不渲染求助

核心原因 #

1. React/React Router 多实例冲突 #

Module Federation 场景下，如果core应用和子应用未共享 React、React Router 依赖，会导致运行时存在多个独立的 React/React Router 实例。React 不允许跨实例渲染组件，因此子应用传入的DashboardScreen等组件无法在core的Page组件中正常挂载。

2. 嵌套路由的 Outlet 实例不匹配 #

子应用路由中，父路由new指定component: Outlet，但这个Outlet是子应用本地 React Router 导出的实例，而Layout组件中的Outlet是core应用的 React Router 实例。两者不属于同一上下文，导致嵌套路由的渲染链路断裂，子组件无法通过正确的Outlet渲染。

解决方案 #

步骤1：配置 Module Federation 共享依赖 #

在core应用和子应用的 Webpack 配置中，确保共享 React、React Router 相关依赖并强制单实例：

core 应用 webpack 配置：

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'core',
      exposes: {
        './Page': './src/Page',
        './routes': './src/routes',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' }, // 匹配你的React实际版本
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
        'react-router-dom': { singleton: true, requiredVersion: '^6.0.0' }, // 匹配你的React Router实际版本
      },
    }),
  ],
};

子应用 webpack 配置：

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'childApp',
      remotes: {
        core: 'core@http://localhost:3000/remoteEntry.js', // 替换为core应用的实际remoteEntry地址
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
        'react-router-dom': { singleton: true, requiredVersion: '^6.0.0' },
      },
    }),
  ],
};

步骤2：修正路由结构中的 Outlet 配置 #

子应用路由中，父路由new不需要单独指定本地Outlet作为组件（Layout中已经通过共享的Outlet处理嵌套渲染），需改为导入共享的Outlet：

// 子应用 routes.tsx
import { Outlet } from 'react-router-dom'; // 确保导入的是共享依赖中的Outlet

export const routes: Route[] = [
    {
        key: 'new',
        title: 'New',
        path: 'new',
        component: () => <Outlet />, // 使用共享的Outlet实例
        icon: PeopleAltIcon,
        children: [
            {
                key: 'dashboard',
                title: 'Dashboard',
                path: 'dashboard',
                component: DashboardScreen,
                icon: undefined,
                children: [],
                visible: true,
            },
            {
                key: 'view',
                title: 'View',
                path: 'view',
                component: ViewScreen,
                icon: undefined,
                children: [],
                visible: true,
            },
        ],
        visible: true,
    },
];

步骤3：验证组件有效性 #

确认DashboardScreen和ViewScreen是标准的 React 组件，无语法错误或未处理的异步逻辑（若为懒加载组件，需确保在Suspense包裹下使用）。

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