javascript - vue と reactjs で単一スパ マイクロ フロントエンドを使用するとレイアウトが崩れる

Question

シングル スパ プロジェクトで問題が発生しました。理由はわかりませんが、ヘッダーが下部にあり、その上にコンテンツが表示されたり、フッターの下にコンテンツが表示されたりするなど、シングル スパがレイアウトを壊すことがあります。

シングルスパがわからない場合は、https ://single-spa.js.org/docs/examples で読むことができます。

これは私の登録アプリです:

import { registerApplication, start } from "single-spa";
import * as isActive from "./activity-functions";

registerApplication(
  "@vue-mf/vue-navbar",
  () => System.import("@vue-mf/vue-navbar"),
  isActive.vueNavbar
);

registerApplication(
  "@vue-mf/rate-dogs",
  () => System.import("@vue-mf/rate-dogs"),
  isActive.vueComponent
);

registerApplication(
  "@react-mf/people",
  () => System.import("@react-mf/people"),
  isActive.reactComponent
);

registerApplication(
  "@vue-mf/vue-footer",
  () => System.import("@vue-mf/vue-footer"),
  isActive.vueFooter
);

start();

これは私のアクティビティ関数です:

export function prefix(location, ...prefixes) {
  return prefixes.some(
    prefix => location.href.indexOf(`${location.origin}/${prefix}`) !== -1
  );
}

export function vueNavbar(location) {
  // The navbar is always active
  return true;
}

export function vueComponent(location) {
  return prefix(location, "rate-doggos");
}

export function reactComponent(location) {
  return prefix(location, "people");
}

export function vueFooter(location) {
  // The footer is always active
  return true;
}

見やすくするために、これはレイアウト ブレークの例です。

vue&でシングルスパを使用していますreact

誰かがこれを解決するのを手伝ってくれますか? 私はこのレイアウトの中断についてかなり混乱しています