如何使道具有状态/如何在单个 spa 反应中从根配置到子应用程序获取更新的道具？

如何解决如何使道具有状态/如何在单个 spa 反应中从根配置到子应用程序获取更新的道具？

我有一个 spa 应用程序，我在其中使用了 3 个子应用程序（每个应用程序都是一个微前端）。对于 1 个子应用程序，我安装到根 html 并设置为始终处于活动状态。对于剩下的 2 个，根据路由，将自己挂载/卸载到根 html 上。对于始终处于活动状态的子项，我将当前路径作为来自根的 prop 传递，以便基于路径，该子项中的组件应该呈现（条件呈现）。我面临的问题是，孩子能够从根接收道具，但是当路径改变时，新路径没有反映到孩子中，我必须手动重新加载页面，以便有条件地渲染这些组件那个孩子的应用程序。所以，这里是 root-config.js 文件和 child.js 文件。

**root-config.js**

import { registerapplication,start } from "single-spa";
registerapplication({
  name: "@mrc/app1",app: () => System.import("@mrc/app1"),activeWhen: ["/app1",(location) => location.pathname.startsWith("/app1")],});

registerapplication({
  name: "@mrc/app2",app: () => System.import("@mrc/app2"),activeWhen: ["/app2",(location) => location.pathname.startsWith("/app2")],});

registerapplication({
  name: "@mrc/app3",app: () => System.import("@mrc/app3"),activeWhen: ["/"],customProps: {
    currentPath: window.location.pathname,},});

start();

**app3.js**

import React from "react";
import Header from "./components/Header/Header";
import LeftPane from "./components/LeftPane/LeftPane";
import NavBody from "./components/NavBody/NavBody";

const App = ({ currentPath }) => {
  return (
    <>
      <Header />
      {typeof window !== "undefined" && currentpath !== "/" ? (
        <LeftPane />
      ) : null}
      {typeof window !== "undefined" && currentPath === "/" ? (
        <NavBody />
      ) : null}
    </>
  );
};

export default App;

目标是 app3 的 LeftPane 组件不应仅针对 path="/" 呈现，而 NavBody 应仅针对 path="/" 呈现。 我怎样才能做到这一点？

解决方法

我是 single-spa 的维护者之一。感谢您指出文档中可能更清楚的部分。

从 registerApplication 方法传入的自定义道具不是“实时”的，不会自动更新。幸运的是，您可以通过多种不同的方式来完成您想要完成的工作，从而满足您的需求。

选项：

1. 而不是从 window.location.pathname 调用中传递 registerApplication。直接在@mrc/app3
中使用即可
2. 让 app3 使用某种路由器（可能是 react-router）并使用其中的路由

还有其他一些选择，但我认为其中任何一个都可以解决您面临的问题。

single-spa 旨在成为微前端之间的顶级路由器。每个微前端通常都有自己的路由。

查看 this example 以及 single-spa 如何仅处理顶级路由 planets is active at /planets 然后行星应用程序执行 routing internally 以使组件在特定路线上处于活动状态。