qiankun微前端主子应用路由模式不同

### 解决 qiankun 微前端框架中主应用和子应用路由模式不同

在 qiankun 构建的微前端架构下，当主应用与子应用采用不同的路由模式时（即主应用使用 `hash` 模式而某个子应用可能采用了 `history` 模式），确实会遇到一些兼容性和路径匹配方面的问题。为了确保两者能够和谐共存并正常工作，可以采取如下措施：

#### 配置子应用以适应主应用的路由模式

对于基于 React 的子应用而言，在配置其内部使用的 `react-router-dom` 时，应当考虑调整路由器的基础路径以及模式设置。

如果主应用是以 `hash` 模式的 URL 来区分各个子应用，则建议所有子应用也统一到相同的 `hash` 模式之下。这可以通过修改子应用中的路由配置来达成。具体来说，就是在初始化 `BrowserRouter` 或者其他类型的 Router 组件时指定 `basename` 参数[^2]。

import { BrowserRouter as Router } from 'react-router-dom';

<Router basename="/subapp">
    {/* 子应用组件 */}
</Router>

这样做之后，即使是在 `hash` 模式下的父级页面环境中，子应用也能正确解析相对路径，并且不会干扰到全局的历史记录管理机制。

而对于那些已经选择了 `history` API 进行导航控制的应用程序，可以在启动前通过环境变量或者其他方式动态设定基础路径，从而使得这些应用程序能够在被嵌入到另一个更大的 Web 应用之中时仍然保持独立运作的能力[^3]。

另外值得注意的是，qiankun 自身提供了针对这种情况的支持——它允许开发者为每一个注册过的子模块定义特定的生命钩子函数，在其中执行必要的初始化逻辑，比如重写窗口历史状态或是监听地址栏变化事件等操作。因此，利用好这一特性也可以帮助更好地处理跨域间的链接转换问题[^1]。

最后，考虑到实际开发过程中可能会面临更多复杂场景，推荐始终遵循官方文档给出的最佳实践指南来进行相应适配，同时积极关注社区内关于此话题的技术讨论，以便及时获取最新的解决方案和技术支持。