微服务架构qiankun集成react子应用

前一篇文章讲了qiankun集成vue子应用，这篇随笔讲集成react子应用。

1、创建react子应用

用react脚手架初始化一个react项目，至于项目的数据仓库store和路由、以及UI组件库这里就不做讲解，可以自己自行网上找资料配置。

create-react-app  my-react-app

2、在src路径下创建publicPath.js文件，内容和上一篇的vue子应用一致，这里不再说了，不清楚请翻我上一篇随笔

3、下面是react项目的入口js的内容，针对这js做下讲解

import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { HashRouter, BrowserRouter } from "react-router-dom";
import { Spin, ConfigProvider } from "antd";
import { store, persistor } from "./store";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import zhCN from "antd/locale/zh_CN";
import "./publicPath.js";let mountNode = null;
let root = null;function render(props) {const { container } = props;mountNode = container? container.querySelector("#root"): document.querySelector("#root");root = ReactDOM.createRoot(mountNode);root.render(<ConfigProvider locale={zhCN}><Provider store={store}><PersistGate loading={null} persistor={persistor}><Suspense fallback={<Spin size="large" style={{ marginTop: 100 }} />}><BrowserRouterbasename={window.__POWERED_BY_QIANKUN__ ? "/app-react/" : "/"}><App /></BrowserRouter></Suspense></PersistGate></Provider></ConfigProvider>
  );
}if (!window.__POWERED_BY_QIANKUN__) {render({});
}export async function bootstrap() {console.log("[react16] react app bootstraped");
}export async function mount(props) {console.log("[react16] props from main framework", props);render(props);
}export async function unmount(props) {root.unmount();
}
reportWebVitals();

这里绝大部分和vue一致，也是新增一个render函数，用于区分是从qiankun框架访问还是直接访问，里面的创建react实例根据react的版本可能稍有不同，我这边使用的是18.2.0，路由是react-router-dom的BrowserRouter，是

history模式，这里也要设置路由的base，这里和vue一致，然后下面暴露三个方法，也和上一篇的vue一致，只不过unmount方法用的是react的卸载，这个是react18.2.0的卸载方法，官网用的是unmountComponentAtNode，可能

这个方法目前已经废弃，如果你用的react是17版本以前的可以使用，如果是17之后的或者最新的就用我上面的这个。

3、最后是打包，修改webpack配置，这里使用的是官网推荐的@rescripts/cl，首先安装插件依赖

 

yarn add -D @rescripts/cli

 

然后在项目根目录下新增.rescriptsrc.js文件，文件内容如下

 

const { name } = require("./package");module.exports = {webpack: (config) => {config.output.library = `${name}-[name]`;config.output.libraryTarget = "umd";// webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobalconfig.output.chunkLoadingGlobal = `webpackJsonp_${name}`;config.output.globalObject = "window";return config;},devServer: (_) => {const config = _;config.headers = {"Access-Control-Allow-Origin": "*",};// config.historyApiFallback = true;// config.hot = false;// config.watchContentBase = false;// config.liveReload = false;return config;},
};

 

主要有个打包配置，这里注意一下jsonFunction和chunkLoadingGlobal的区别，webpack4使用jsonFunction，webpack5则用chunkLoadingGlobal，下面就是headers的配置，防止跨域csp的问题，这点和上一篇的vue里面是一样的。

 

到这里react子应用就配置好了，下面就是在主应用注册子应用，如下：

 

//注册微服务应用
registerMicroApps([{name: "vueApp",entry: "//localhost:8080",container: "#micro-app-container",activeRule: "/app-vue",},{name: "reactApp",entry: "//localhost:3000",container: "#micro-app-container",activeRule: "/app-react",},
]);

 

第一个是上一篇的vue子应用，下面的就是我们刚刚创建的子应用，到这里就完成了整个react子应用的集成。

下面是我在主应用的App.vue里面的代码片段，点击vue子应用跳转vue子应用，点击react子应用跳转react子应用。

<template><div id="app"><div class="chunk-menu"><divclass="chunk-menu-item":class="[activeApp == 1 ? 'active-menu' : '']"@click="handleChange(1)">vue子应用</div><divclass="chunk-menu-item":class="[activeApp == 2 ? 'active-menu' : '']"@click="handleChange(2)">react子应用</div></div><img alt="Vue logo" src="./assets/logo.png" /><div id="micro-app-container"></div></div>
</template><script>
export default {name: "App",components: {},data() {return {activeApp: "",};},methods: {handleChange(type) {this.activeApp = type;switch (type) {case 1: //vuethis.$router.push("/app-vue/");break;case 2: //reactthis.$router.push("/app-react/");break;}},},
};
</script>

补：这里会有一个问题，假如点击同一个路由的话可能会报异常,这个是vue-router的bug，可以在主应用的router文件里解决，解决方案放在下面，主要是Vue.use(Router)下面的

import Vue from "vue";
import Router from "vue-router";Vue.use(Router);
const originalPush = Router.prototype.push;
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
Router.prototype.push = function push(location) {return originalPush.call(this, location).catch((err) => err);
};