咨询：Angular宿主中React微前端使用react-router-dom路由的可行性

核心结论 #

Angular宿主中的React微前端完全支持使用react-router-dom实现路由，React宿主场景下同样可行。你遇到的TypeError: c.createContext is not a function是依赖共享配置错误或版本冲突导致的，并非技术本身不兼容。

报错根源 #

这个错误的本质是React实例重复加载或版本不匹配：

• 宿主与微前端各自打包了独立的React实例，导致react-router-dom依赖的createContext API无法找到正确的React上下文
• 若React版本过低（低于16.3，createContext是该版本新增的API），也会触发此报错

解决方案 #

1. 配置Vite React微前端的依赖共享 #

在微前端的vite.config.js中，将React、ReactDOM、react-router-dom标记为单例共享依赖，确保全局仅加载一份实例：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'reactMfe',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.jsx',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
        'react-router-dom': { singleton: true, requiredVersion: '^6.8.0' }
      }
    })
  ],
  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
});

• singleton: true 强制全局仅使用一份依赖实例，避免上下文冲突
• requiredVersion 统一宿主与微前端的依赖版本，消除版本差异

2. 同步Angular宿主的共享配置 #

在Angular宿主的native-federation.config.js中，同步配置相同的共享依赖：

module.exports = {
  name: 'angularHost',
  remotes: {
    reactMfe: 'http://localhost:5173/remoteEntry.js'
  },
  shared: {
    react: { singleton: true, requiredVersion: '^18.2.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
    'react-router-dom': { singleton: true, requiredVersion: '^6.8.0' }
  }
};

3. 微前端路由实现规范 #

• 为避免与宿主路由冲突，给React微前端的路由添加统一前缀（如/react-mfe）
• 若宿主使用HTML5路由模式，可考虑用HashRouter替代BrowserRouter，减少路由模式冲突
• 示例路由代码：

import { createBrowserRouter, RouterProvider, useNavigate } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

const router = createBrowserRouter([
  {
    path: '/react-mfe/home',
    element: <Home />,
  },
  {
    path: '/react-mfe/about',
    element: <About />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

• 微前端内部跳转直接使用react-router-dom的useNavigate等API，无需依赖宿主路由逻辑

4. 路由隔离优化 #

在Angular宿主的路由配置中，将微前端路由前缀的请求转发到微前端组件，实现路由层面的隔离：

// Angular宿主路由配置
const routes: Routes = [
  // 其他宿主路由
  {
    path: 'react-mfe/**',
    component: ReactMfeComponent // 加载React微前端的组件
  }
];

示例资源补充 #

目前暂无直接适配Angular宿主+Vite React微前端+路由的完整示例，但可基于现有Native Federation React示例，按照上述步骤调整依赖共享配置并添加路由逻辑即可实现。

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