qiankun注册子应用（非路由关联）

需求中需要把一个子应用的页面嵌入到主应用的右下角，而不是通过切换页面路由的方法来显示子应用，这里应用到了qinakun文档的第二个子应用的注册方式。
当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

如果微应用不是直接跟路由关联的时候，你也可以选择手动加载微应用的方式：

php 复制代码

import { loadMicroApp } from 'qiankun';


loadMicroApp({
  name: 'app',
  entry: '//localhost:7100',
  container: '#yourContainer',
});

点击按钮的时候挂载子应用

这是之前通过路由判断的时候注册的子应用

js 复制代码

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'datartApp', // app name registered
    entry: '//localhost:5174',
    container: '#subapp',
    activeRule: '/IframePage/iframe_test',
  },

现在需要修改成点击按钮再挂载，而且不需要activeRule来监听路由的切换

这里使用loadMicroApp来手动挂载

js 复制代码

//index.tsx 主应用基座

import { registerMicroApps, start,loadMicroApp } from 'qiankun';

const toggleIframe = () => {
    setIsVisible(!isVisible)
    loadMicroApp({
      name: 'datartApp',
      entry: '//localhost:5174/report',
      container: '#sub-app',
      //activeRule 这里不需要路由了
    });
    start()
  };
  <div
      style={
          display: isVisible ? 'block' : 'none'
      }
    id='sub-app'
  ></div>

功能大概是点击toggleIframe的时候，让基座去注册子应用并且挂载到id为sub-app的div上

子应用路由

js 复制代码

//子应用路由注册
<Router>
      <Routes>
        <Route path="/" element={<AiChat />} />
      </Routes>
  </Router>

出现的问题

子应用加载进来的时候root是没有内容的，我以为默认他会加载根路由下面的组件，但是可以看到这里页面是空白的

当我把主应用的路由切换到 /IframePage/iframe_test

子应用路由修改如下后

js 复制代码

Route path="/IframePage/iframe_test" element={<AiChat />} />

当主路由切换到/IframePage/iframe_test的时候，会触发子应用的AiChat这个组件，这个是没问题的

但问题是我不想根据主应用的路由去显示，而是不管主应用是什么路由，子应用都能正确加载

把子路由的配置修改一下，这样无论主应用是什么路由，子应用都能正确加载到对应组件

js 复制代码

<Route path="*" element={<AiChat />} />

如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！

往期好文推荐

作者：一只大加号

链接：juejin.cn/post/751471...

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。