微前端挂载触发Invalid hook call问题，路由配置可行性咨询

一、Invalid Hook Call报错原因与修复方案 #

核心原因 #

微前端场景下加载了多个独立的React/ReactDOM实例，违反了React Hooks的调用规则——所有Hooks必须在同一React实例的组件上下文内执行。你的配置存在两个关键问题：

1. 容器（Container）和Marketing应用都将react、react-dom、react-router-dom放在peerDependencies中，而Webpack Module Federation的shared配置默认读取dependencies，导致这些依赖无法被共享。
2. 未配置共享依赖的singleton模式，即使依赖在dependencies中，也可能因版本差异加载多份实例。

修复步骤 #

1. 调整package.json依赖位置
   将Container和Marketing的react、react-dom、react-router-dom从peerDependencies移动到dependencies中，确保版本完全一致（均为18.2.0/6.3.0）。

2. 优化Webpack共享配置
   在两个应用的ModuleFederationPlugin中，给核心依赖添加强制共享规则：

   // Container和Marketing的webpack.dev.js中修改shared配置
   shared: {
     ...packageJson.dependencies,
     react: {
       singleton: true, // 强制全局只加载一份React实例
       requiredVersion: packageJson.dependencies.react,
     },
     'react-dom': {
       singleton: true,
       requiredVersion: packageJson.dependencies['react-dom'],
     },
     'react-router-dom': {
       singleton: true,
       requiredVersion: packageJson.dependencies['react-router-dom'],
     },
   }
   

3. 清理缓存并重启
   删除两个项目的node_modules、package-lock.json（或yarn.lock），重新安装依赖后启动应用。

二、容器用Router，远程用BrowserRouter是否可行？ #

完全不可行，会引发路由上下文冲突和状态不同步问题：

• BrowserRouter会自动创建独立的history实例，与容器的Router使用的history完全隔离，导致路由跳转无法同步，还会破坏React上下文的一致性，加重hooks报错。
• 你的Marketing代码存在错误：BrowserRouter不支持传入history和location props，只有底层的Router组件才支持自定义路由上下文。

正确做法 #

修改Marketing的App.js，将BrowserRouter替换为Router：

// 原代码
import { Routes, Route, BrowserRouter as Router } from 'react-router-dom';
// 修改后
import { Routes, Route, Router } from 'react-router-dom';

保持从容器接收history并传入Router的逻辑，确保远程应用与容器共享同一路由上下文。

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