基于qiankun搭建react18微前端项目入门实践

以下是一个基于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）和容错处理。

基于qiankun搭建react18微前端项目入门实践

评论已关闭

推荐阅读