Main application repository address github.com/LuckyChou71…

Address of the sub-application repository github.com/LuckyChou71…

Main application "qiankun" : "^ 2.6.3" application "react" son: "^ 17.0.2", "the react - the router - dom" : "^ 5.3.0", "vite" : "^ 2.8.0" "vite - plugin - qiankun" : "^ 1.0.11"Copy the code

Active Application Configuration

  1. Install qiankun
yarn add qiankun
Copy the code
  1. Configuration qiankun

Create micro. Ts in the project SRC directory as follows

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react-demo'.entry: '//localhost:3001'.// The node to which the child application is mounted
    container: '#container'.// The route loaded by the subapplication
    activeRule: '/start/react',}]); start();Copy the code
  1. File in the main entrymain.tsxIn the importmicro.ts
import './micro';
Copy the code
  1. Configure the routing

Intercept some routing code snippets

  <Router>
    <Routes>
      <Route path="/" element={<Home />} / ><Route path="/start/*" element={<Layout />} / ></Routes>
  </Router>
Copy the code

The /start/* on this side must be followed by /*

Because our /start/react matches the subapplication route

The child application will also have its own route so the * wildcard character is required

  1. Create nodes for child applications

Intercept some code snippets from Layout.tsx

    <main>
      <div className="max-w-full mx-auto py-6 sm:px-6 lg:px-8">
        <div id="container">
          <Welcome />
        </div>
      </div>
    </main>
Copy the code

A node with the ID of Container is created for the child application

This ID corresponds to the configuration in micro-ts above

Sub-application Configuration

Because the building tool for the sub-application uses Vite

The official qiankun has not yet been supported so we will introduce a third-party library called Vite-plugin-Qiankun

There are two commonly used content in Viet-plugin-Qiankun

RenderWithQiankun exports life cycle functions for sub-applications to be called by the main application at special times

POWERED_BY_QIANKUN can determine whether it is in the qiankun environment

Modify the entry file/route of the child application

import {
  renderWithQiankun,
  qiankunWindow,
} from 'vite-plugin-qiankun/dist/helper';

function render(props: any) {
  const { container } = props;
  ReactDOM.render(
    // In the qiankun environment, add the route prefix in the main application
    <Router
      basename={qiankunWindow.__POWERED_BY_QIANKUN__ ? '/start/react' :"'} >
      <App />
    </Router>,
    container
      ? container.querySelector('#root')
      : document.getElementById('root')); }// some code
renderWithQiankun({
  mount(props) {
    console.log('mount');
    render(props);
  },
  bootstrap() {
    console.log('bootstrap');
  },
  unmount(props: any) {
    console.log('unmount');
    const { container } = props;
    constmountRoot = container? .querySelector('#root');
    ReactDOM.unmountComponentAtNode(
      mountRoot || document.querySelector('#root')); }});if(! qiankunWindow.__POWERED_BY_QIANKUN__) { render({}); }Copy the code

After configuration, the project can be started normally, but the console will see the following error. The specific issue is linked below

Github.com/umijs/qiank…