React 18 配置 QianKun：主应用【React 18】+ 微应用【React 18】

一、搭建主应用

使用命令，依靠脚手架创建 react18 项目

create-react-app react-main-qiankun

安装Antd

npm install antd –-save

安装react-router

npm i react-router-dom

安装qiankun

 npm i qiankun --save

主应用版本信息：

"antd": "^5.10.0",
"qiankun": "^2.10.13",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",

安装完毕后，对主应用进行相关代码配置：

1、在 index.js 中引入 antd、react-router

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { ConfigProvider } from "antd";
import zhCN from "antd/locale/zh_CN";
import "antd/dist/reset.css";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <ConfigProvider locale={zhCN}>
            <React.StrictMode>
                <App />
            </React.StrictMode>
        </ConfigProvider>
    </BrowserRouter>
);

reportWebVitals();

2、主应用中注册微应用，在 index.js中引入

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { ConfigProvider } from "antd";
import zhCN from "antd/locale/zh_CN";
import "antd/dist/reset.css";
import { registerMicroApps, start } from "qiankun";

registerMicroApps([
    {
        name: "react-micro-application", // 子应用的名称，必须唯一。
        entry: "//localhost:3011", // 子应用项目本地运行地址
        container: "#container", //  子应用的容器（子应用嵌入到主项目id为container的容器）
        activeRule: "/react-micro1", // 子应用激活时的路由规则（子应用路由）
        props: { // 向子应用传参
            state: false,
            userId: 'userId',
            token: '18145EWDFDEdsefEFFfdDFf145454'
        }
    },
]);

start();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <ConfigProvider locale={zhCN}>
            <React.StrictMode>
                <App />
            </React.StrictMode>
        </ConfigProvider>
    </BrowserRouter>
);

reportWebVitals();

3、修改APP.js文件，配置简单的样式

import React from 'react';
import { Layout, Menu } from 'antd';
import { VideoCameraOutlined } from "@ant-design/icons";
import {NavLink} from "react-router-dom";
const { Header, Content, Footer, Sider } = Layout;

const App = () => {
    return (
        <Layout>
            <Header
                style={{
                    display: 'flex',
                    alignItems: 'center',
                }}
            >
                <div className="demo-logo" ><h1 style={{color: '#fff'}}>名称</h1></div>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={['1']}
                    items={[
                        {
                            key: "1",
                            icon: <VideoCameraOutlined />,
                            label: <NavLink to="/react-micro1">react 1 应用</NavLink>,
                        },
                        {
                            key: "2",
                            icon: <VideoCameraOutlined />,
                            label: <NavLink to="/react-micro2">react 2 应用</NavLink>,
                        },
                    ]}
                />
            </Header>
            <Content style={{height: 'calc(100vh - 128px)', backgroundColor: '#b4efe1'}} id={'container'}>
                <h1>主应用显示容器</h1>
            </Content>
            <Footer style={{textAlign: 'center',}}>
                Ant Design ©2023 Created by Ant UED
            </Footer>
        </Layout>
    );
};
export default App;

如图：

二、创建微应用

创建项目及引入依赖与主应用一致，这里不做过多赘述。
应用及依赖创建完，除 quankun 其他的配置后，对微应用进行qiankun配置：
1、在src文件夹下创建public-path.js，配置为：

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

2、修改webpack配置，安装craco：

npm i @craco/craco --save

3、在项目根目录下创建craco.config.js，配置为：

const { name } = require("./package");

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.output.library = `${name}-[name]`;
      webpackConfig.output.libraryTarget = "umd";
      webpackConfig.output.chunkLoadingGlobal = `webpackJsonp_${name}`;
      return webpackConfig;
    },
  },
  devServer: (devServerConfig) => {
    devServerConfig.historyApiFallback = true;
    devServerConfig.open = false;
    devServerConfig.hot = false;
    devServerConfig.watchFiles = [];
    devServerConfig.headers = {
      "Access-Control-Allow-Origin": "*",
    };
    return devServerConfig;
  },
};

4、修改package.json：

"scripts": {
  "start": "set PORT=3011 && craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

5、修改public文件夹下index.html：

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="appRoot"></div>
</body>

6、修改index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";

import "./public-path";

let root = null;
function render (props) {
    const { container } = props;
    root = root || ReactDOM.createRoot(container ? container.querySelector("#appRoot") : document.getElementById("appRoot") );
    root.render(
        <BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? "/react-micro1" : "/"}>
            <React.StrictMode>
                <App />
            </React.StrictMode>
        </BrowserRouter>
    );
}

if (!window.__POWERED_BY_QIANKUN__) {
    render({});
}

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

export async function mount (props) {
    console.log("[react18] props from main framework", props);
    render(props);
}

export async function unmount (props) {
    root.unmount();
    root = null;
}

reportWebVitals();

7、修改app.js

import './App.css';
import {Layout, Menu} from "antd";
const { Content, Sider } = Layout;

function App() {
  return (
    <div className="App" id={'container'}>
        <Layout style={{padding: '24px 0',}}>
            <Sider width={200}>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    style={{height: '100%'}}
                    items={[
                        {
                            key: 111,
                            label: '微应用1-菜单1'
                        },
                        {
                            key: 222,
                            label: '微应用1-菜单2'
                        },
                        {
                            key: 333,
                            label: '微应用1-菜单3'
                        }
                    ]}
                />
            </Sider>
            <Content
                style={{
                    padding: '0 24px',
                    minHeight: 666,
                }}
            >
                Content
            </Content>
        </Layout>
    </div>
  );
}

export default App;

效果如图：

到此为止，主应用与微应用配置基本结束，通过主应用点击菜单“react 1 应用”，可将微应用内容在主应用内展示，下面看效果图：

注意事项

1、主应用注意事项：

在主应用的registerMicroApps函数内，container的值，需要与app.js内容器属性id的值一致，否则会报错，activeRule的值需要与配置的Meun菜单路径一致，否则会找不到相关应用。

2、微应用注意事项：

1. 当创建多个微应用时，public下index.html的id尽量不要重复，相关id修改后，要同步修改src文件下index.js中render函数内部的querySelector函数及getElementById函数所传值。
2. 微应用src文件下index.js中的<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? "/react-micro1" : "/"}>标签内，"/react-micro1"要与主应用activeRule的值一致，否则会找不到路径。
3. 如果这篇文章对你有用的话，注意要进行点赞、收藏加评论。