React Router在Module Federation中共享依赖的最佳实践

问题背景

在使用Module Federation架构时，React Router的导航功能在远程模块中无法正常工作。具体表现为当远程模块尝试使用useNavigate钩子时，会抛出错误提示"useNavigate() may be used only in the context of a component"，即使应用确实已经包裹在Router组件中。

根本原因分析

这个问题源于React Router库的实例管理机制。React Router内部维护了一些关键的状态变量，这些变量需要在应用的所有部分保持一致。当使用Module Federation时，如果主应用和远程模块加载了不同实例的React Router库，就会导致这些内部状态不一致，从而破坏Router上下文的工作机制。

解决方案

通过Module Federation的共享依赖功能可以解决这个问题。具体实现方式是在Module Federation的配置中显式声明共享以下关键库：

shared: {
  react: { singleton: true, eager: true, requiredVersion: false },
  "react-dom": { singleton: true, eager: true, requiredVersion: false },
  "react-router": { singleton: true, eager: true, requiredVersion: false },
  "react-router-dom": { singleton: true, eager: true, requiredVersion: false }
}

配置参数详解

1. singleton: true
   强制所有模块使用同一个库实例，确保内部状态一致性。

2. eager: true
   使共享依赖立即加载，而不是按需加载，避免潜在的竞态条件。

3. requiredVersion: false
   不强制检查版本号，但生产环境中建议指定确切版本以确保兼容性。

最佳实践建议

1. 版本一致性
   虽然配置中可以关闭版本检查，但建议主应用和所有远程模块使用相同版本的React Router和相关依赖。

2. 共享所有React相关库
   除了react-router，React、ReactDOM等核心库也应该共享，以避免潜在的上下文问题。

3. 生产环境配置
   开发环境可以使用较宽松的配置，但生产环境应指定确切版本号并开启严格模式。

4. 性能考虑
   对于大型应用，可以评估eager加载的影响，在确保功能正常的前提下优化加载策略。

总结

Module Federation为微前端架构提供了强大支持，但共享状态管理库如React Router需要特别注意实例共享问题。通过合理配置共享依赖，可以确保导航功能在分布式架构中正常工作，同时保持应用的稳定性和一致性。