React 18+single-spa-react微前端消除ReactDOM.render警告配置方法

当你的微前端项目使用React 18和single-spa-react时，出现ReactDOM.render is no longer supported in React 18. Use createRoot instead警告，是因为single-spa-react默认渲染逻辑仍依赖旧的ReactDOM API。你需要手动适配React 18的createRoot API，修改root.ts配置即可消除警告：

修改要点 #

• 从react-dom/client导入createRoot替代原ReactDOM导入
• 移除singleSpaReact配置中的ReactDOM参数
• 新增自定义render和unmount函数，适配React 18的根实例管理逻辑

修改后的完整代码 #

import React from "react";
import { createRoot } from "react-dom/client";
import singleSpaReact from "single-spa-react";
import { ErrorBoundary } from "Components/ErrorBoundary";
import { Root } from "./root.component";

const domElementGetter = () => {
  let el = document.getElementById("main");
  if (!el) {
    el = document.createElement("div");
    el.id = "main";
    el.className = "main";
    document.body.appendChild(el);
  }
  return el;
};

const lifecycles = singleSpaReact({
  React,
  domElementGetter,
  errorBoundary: () => <ErrorBoundary />,
  rootComponent: Root,
  // 自定义React 18渲染逻辑
  render({ domElement, rootComponent }) {
    const root = createRoot(domElement);
    root.render(rootComponent);
    // 保存根实例到dom元素，供卸载时使用
    domElement._root = root;
  },
  // 自定义卸载逻辑
  unmount({ domElement }) {
    domElement._root?.unmount();
    delete domElement._root;
  },
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

逻辑说明 #

• createRoot是React 18官方推荐的根渲染API，完全替代旧的ReactDOM.render
• 在render函数中创建根实例并渲染组件，同时将实例挂载到目标dom元素上，确保卸载时能找到对应实例
• unmount函数调用根实例的unmount方法完成组件卸载，避免内存泄漏

内容的提问来源于stack exchange，提问作者shmagi