使用vue2.X + qiankun2.4.4作为主应用，再使用react-create-app作为子应用，子应用使用react-router-domV6版本出现子应用路由在unmount的时候不卸载，重复加载的问题

[lx815]

What happens?

使用vue2.X + qiankun2.4.4作为主应用，再使用react-create-app作为子应用，当两个子路由在菜单栏来回切换的时候，子应用中的组件会出现useEffect函数多次重复加载。初步排查是因为子应用使用了react-router-domV6的版本，导致子应用路由在unmount的时候不卸载，重复加载的问题。

Mini Showcase Repository(REQUIRED)

Provide a mini GitHub repository which can reproduce the issue.

How To Reproduce

主应用配置： main.js registerMicroApps([ { name: 'paint', entry: 'http://localhost:3000', container: '#main-app-paint', activeRule: '/paint' }, ])

router/index.js const routes = [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', component: () => import('@/views/home.vue'), meta: { keepAlive: true }, children: [ { path: '/paint:pathMatch(.)', name: 'paint', component: () => import('@/views/paint.vue'), meta: { keepAlive: true } }, ] }, { path: '', redirect: '/home' }, ];

const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes });

export default router;

home.vue `

// 点击路由跳转 this.$router.push(/${menuIndex});

`

paint.vue `

`

子应用配置： index.js ` import './public-path'; import React from 'react'; import ReactDOM from 'react-dom'; // import App from './App'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import { createRoot } from 'react-dom/client'; import 'moment/locale/zh-cn'; import 'antd/dist/antd.min.css'; import ErrorBoundary from './components/errorBoundary'; import Students from './views/Students/Students';

function render(props: any) { const { container } = props; const root = createRoot( container ? container.querySelector('#paint') : document.querySelector('#paint') ); root.render( <BrowserRouter basename={window.POWERED_BY_QIANKUN ? '/paint' : '/'}>

} />

</BrowserRouter>

); }

// @ts-ignore if (!window.POWERED_BY_QIANKUN) { render({}); }

export async function bootstrap() { console.log('[react16] react app bootstraped'); }

export async function mount(props: any) { console.log('[react16] props from main framework', props); render(props); }

export async function unmount(props: any) { const { container } = props; ReactDOM.unmountComponentAtNode( container ? container.querySelector('#paint') : document.querySelector('#paint') ); } **_students.tsx_** import React, { useEffect, useState } from 'react'; export default function Students() { useEffect(() => { // 这里就会出现两个子应用之间来回切换，然后这个console累加打印的问题。 console.log('多次加载了'); }, []); return (

子组件

); } `

Context

• **qiankun 2.4.4:
• **主应用：vue2.X:
• **子应用：react18，react-router-dom v6:

[ganluren007]

你好，我也遇到这个问题，你这边这个问题解决了吗？

[ganluren007]

如果解决了，跪求求方案