ModuleFederationPlugin与Webpack：错误路由为何触发/XXXX/main.js下载？

这不是正常行为，本质是单页应用（SPA）的客户端路由与服务器资源映射不匹配导致的问题，结合微前端场景需要针对性调整配置：

问题原因 #

• 通过<Nav>组件跳转时，用的是React Router的客户端路由：跳转逻辑由JS处理，不会触发浏览器向服务器发送新的资源请求，只是修改浏览器地址栏并渲染对应组件，所以能正常运行。
• 直接在地址栏输入http://localhost:4230/trainees/add时，浏览器会向服务器发送该路径的HTTP请求，而你的服务器没有配置该路径对应的资源，就会出现尝试获取不存在资源的情况。

解决方法 #

1. 配置服务器的路由 fallback 规则 #

确保所有路由请求都返回容器应用的入口HTML文件（通常是index.html），让客户端路由接管后续处理：

• 如果使用webpack-dev-server，在配置中添加：

devServer: {
  historyApiFallback: true,
  // 其他配置...
}

• 如果是生产环境服务器（如Nginx），修改配置文件添加：

location / {
  try_files $uri $uri/ /index.html;
}

2. 确保React Router配置正确 #

• 容器应用使用<BrowserRouter>包裹路由结构；
• 子应用的路由需作为容器路由的子路由存在（比如通过Route的element加载子应用组件），避免路由冲突；
• 你已经在Module Federation的shared配置中将react-router-dom设为singleton，这个配置要保留，确保容器和子应用使用同一个路由实例，防止路由状态不一致。

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