在 React 项目中使用 qiankun（微前端框架）需要分别配置主应用和子应用。以下是具体实现步骤：

1. 主应用配置（React）

1.1 安装依赖

npm install qiankun --save

1.2 注册子应用

在主应用入口文件（如 index.js）中注册子应用：

import React from 'react';import ReactDOM from 'react-dom';import { registerMicroApps, start } from 'qiankun';import App from './App';// 注册子应用registerMicroApps([
  {
    name: 'react-subapp', // 子应用名称
    entry: '//localhost:3001', // 子应用入口
    container: '#subapp-container', // 挂载容器
    activeRule: '/react-subapp', // 激活路径
  },
  {
    name: 'vue-subapp', // 可以有多个子应用
    entry: '//localhost:8080',
    container: '#subapp-container',
    activeRule: '/vue-subapp',
  },
]);// 启动 qiankunstart();

ReactDOM.render(<App />, document.getElementById('root'));

1.3 主应用页面（承载子应用）

在主应用的组件中提供挂载容器：

// App.jsimport React from 'react';import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';function App() {  return (    <BrowserRouter>      <div>        <nav>          <Link to="/">主应用</Link> |          <Link to="/react-subapp">React子应用</Link> |          <Link to="/vue-subapp">Vue子应用</Link>        </nav>
        
        {/* 子应用挂载点 */}        <div id="subapp-container" style={{ marginTop: 20 }}></div>      </div>    </BrowserRouter>
  );
}export default App;

2. React 子应用配置

2.1 修改入口文件

子应用需要导出 qiankun 所需的生命周期钩子：

// src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';import './index.css';function render(props) {  const { container } = props;
  ReactDOM.render(
    <App />,
    container ? container.querySelector('#root') : document.querySelector('#root')
  );
}// 独立运行时直接渲染if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}// 导出生命周期函数export async function bootstrap() {  console.log('react app bootstraped');
}export async function mount(props) {  console.log('react app mount', props);
  render(props);
}export async function unmount(props) {  console.log('react app unmount', props);  const { container } = props;
  ReactDOM.unmountComponentAtNode(
    container ? container.querySelector('#root') : document.querySelector('#root')
  );
}

2.2 配置 webpack

需要修改子应用的打包配置，允许跨域和设置库格式。

如果使用 create-react-app，可以安装 react-app-rewired 来修改配置：

npm install react-app-rewired --save-dev

创建 config-overrides.js：

module.exports = {
  webpack: (config) => {
    // 允许开发环境跨域    config.devServer = {
      ...config.devServer,
      headers: {        'Access-Control-Allow-Origin': '*',
      },
    };
    
    // 设置输出格式    config.output.library = `react-subapp`;    config.output.libraryTarget = 'umd';    config.output.globalObject = 'window';    
    return config;
  },
};

修改 package.json 中的启动脚本：

"scripts": {  "start": "react-app-rewired start",  "build": "react-app-rewired build",  "test": "react-app-rewired test"}

2.3 子应用路由配置

确保子应用路由使用相对路径：

// src/App.jsimport { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {  return (
    <BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/react-subapp' : '/'}>
      <Routes>
        <Route path="/" element={<h1>React 子应用首页</h1>} />
        <Route path="/page1" element={<h1>React 子应用页面1</h1>} />
      </Routes>
    </BrowserRouter>
  );
}export default App;

3. 主应用与子应用通信

3.1 主应用发送数据

// 主应用中import { initGlobalState } from 'qiankun';// 初始化全局状态const actions = initGlobalState({  user: '张三',
});// 监听状态变化actions.onGlobalStateChange((state, prev) => {  console.log('主应用监听状态变化:', state, prev);
});// 发送数据到子应用actions.setGlobalState({  user: '李四',
});

3.2 子应用接收数据

// 子应用 mount 时接收export async function mount(props) {  // 监听主应用数据变化
  props.onGlobalStateChange((state, prev) => {    console.log('子应用监听状态变化:', state, prev);
  });  
  // 向主应用发送数据
  props.setGlobalState({    message: '来自子应用的消息',
  });
}

4. 启动应用

1. 先启动主应用（如端口 3000）

2. 再启动子应用（如端口 3001）

3. 访问主应用，通过导航切换到子应用

注意事项

1. 子应用必须支持跨域访问（开发环境通过 Access-Control-Allow-Origin 配置）

2. 子应用的 publicPath 提议设置为绝对路径

3. 样式隔离：qiankun 会默认隔离子应用样式，可通过 sandbox: { strictStyleIsolation: true } 加强隔离

4. 路由冲突：主应用和子应用路由需要做好规划，避免冲突

通过以上配置，你就可以在 React 主应用中集成多个不同技术栈的子应用，实现微前端架构。