基于React的single-spa双向宿主项目可行性及实现问询

完全可以以宿主为入口同时渲染所有注册的应用，核心是调整激活规则并修正现有代码的错误，确保多应用挂载无冲突。

问题拆解 #

你当前的代码中，两个应用的激活规则都设置为location.pathname.startsWith("/")，理论上已满足同时激活的条件，但React导航栏应用存在语法错误，导致实际无法正常渲染。以下是具体修复和配置方案：

1. 修正宿主应用的注册逻辑 #

可以明确设置导航栏应用始终激活（作为全局布局），仪表盘应用匹配根路径，确保两者激活条件同时满足：

import { registerApplication, start } from "single-spa";

// 导航栏：全局激活，始终显示
registerApplication(
  "layout",
  () => import("layout/App"),
  () => true
);

// 仪表盘：匹配根路径及子路径
registerApplication(
  "dashboard",
  () => import("dashboard/App"),
  (location) => location.pathname.startsWith("/")
);

start();

2. 修复React导航栏应用代码 #

现有代码存在未使用变量、懒加载未正确渲染的问题，修正后如下：

import { lazy, Suspense } from "react";
import "./App.css";

// 正确导入宿主组件，移除不必要的类型断言
const Host = lazy(() => import("host/Host"));

function App() {
  return (
    <div className="layout-wrapper">
      {/* 导航栏自身内容 */}
      <nav className="global-nav">
        {/* 示例导航链接 */}
        <a href="/">仪表盘</a>
        <a href="/settings">设置</a>
      </nav>
      {/* 用Suspense处理懒加载的宿主内容 */}
      <Suspense fallback={<div>加载中...</div>}>
        <Host />
      </Suspense>
    </div>
  );
}

export default App;

3. 确保多应用挂载容器不冲突 #

每个应用需要独立的DOM容器，避免渲染时互相覆盖：

• 在宿主HTML中添加两个挂载节点：

<!-- 宿主index.html -->
<body>
  <div id="layout-root"></div>
  <div id="dashboard-root"></div>
</body>

• 导航栏应用的single-spa入口配置（src/single-spa-index.js）：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

export const mount = () => {
  const root = ReactDOM.createRoot(document.getElementById("layout-root"));
  root.render(<App />);
};

export const unmount = () => {
  const root = ReactDOM.createRoot(document.getElementById("layout-root"));
  root.unmount();
};

• 仪表盘应用的single-spa入口配置（src/single-spa-index.js）：

import { createApp } from 'vue'
import App from './App.vue'

let appInstance = null;

export const mount = () => {
  appInstance = createApp(App);
  appInstance.mount('#dashboard-root');
};

export const unmount = () => {
  appInstance.unmount();
  appInstance = null;
};

关键说明 #

• single-spa支持同时激活多个应用，只要激活条件同时满足且挂载容器独立，就不会出现渲染冲突。
• 开发时启动宿主应用后，导航栏和仪表盘会同步渲染，修改导航栏可实时看到对仪表盘布局的影响。
• 若需在特定路径下仅渲染部分应用，只需调整registerApplication的第三个激活规则参数即可。

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