QiankunMicro-Frontend Solution

import { registerMicroApps, start } from 'qiankun';

// register micro apps
registerMicroApps([
  {
    name: 'reactApp',
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vueApp',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);

// start qiankun
start();

/**
 * bootstrap will only be called once when the micro application is initialized
 * mount will be called every time the micro application enters
 * unmount will be called every time the micro application leaves
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}

export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}