以下是一个基于qiankun的React 18微前端项目的基本结构示例。
首先，确保你已经安装了需要的依赖：
npm install qiankun # 安装qiankun
npm install react-router-dom # 用于微应用的路由接下来，创建主应用（也称为容器应用）：
// main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { registerMicroApps, start } from 'qiankun';
// 用于渲染微应用的容器
const App = () => (
<div>
<h1>微前端示例</h1>
<div id="micro-app-container"></div>
</div>
);
// 注册微应用
registerMicroApps([
{
name: 'reactApp', // 微应用的名称
entry: '//localhost:3001', // 微应用的入口地址
container: '#micro-app-container', // 微应用要挂载的DOM节点
activeRule: '/micro-react', // 当路径匹配此规则时，激活微应用
},
// ...可以添加更多微应用
]);
// 启动qiankun
start();
ReactDOM.render(<App />, document.getElementById('app'));然后，创建微应用：
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom';
function Home() {
return <h2>微应用 - Home</h2>;
}
function About() {
return <h2>微应用 - About</h2>;
}
const App = () => (
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
function render(props) {
ReactDOM.render(<App {...props} />, document.getElementById('react-app'));
}
export async function bootstrap() {
console.log('React app bootstraped');
}
export async function mount(props) {
render(props);
// 在这里可以做一些挂载之后的操作
console.log('React app mounted');
}
export async function unmount(props) {
ReactDOM.unmountComponentAtNode(document.getElementById('react-app'));
// 在这里可以做一些卸载之后的操作
console.log('React app unmounted');
}微应用的入口文件 public/index.html 需要有一个用于挂载的DOM节点：
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="react-app"></div>
</body>
</html>最后，确保微应用的构建脚本能够生成可被qiankun识别的入口文件。例如，在package.json中：
{
"name": "react-app",
"version": "0.1.0",
"scripts": {
"build": "react-scripts build",
"start": "react-app-rewired start",
// ...
},
// ...
}以上代码提供了一个基本的框架，展示了如何设置主应用和微应用。在实际应用中，你可能需要处理更多的生命周期函数（如update, unmount）和容错处理。