single-spa：没有额外微前端的路线

在本文中，我们将探索一种通过删除专用错误页面微前端来简化单 Spa 微前端架构的方法

拥有一个基于微前端架构的项目有其好处，但也存在一些挑战。

挑战之一是微前端数量不可避免的增长。这种增长意味着将有更多的微前端需要维护、更新和发布。减少微前端的数量可确保更流畅的开发体验。

为了减少微前端的数量，我们可以将一些现有的功能迁移到已经存在的微前端中。我们需要小心地这样做，因为这会导致我们打破单一责任原则。

如果删除一个仅用于渲染错误页面的微前端该有多好？

删除单 Spa 中的 404 微前端

在 single-spa 中，要添加用 React 编写的 404 页面，您必须有一个单独的应用程序微前端来显示 404 错误。

通常这是在布局定义中完成的：

<route default>
    <application name="error-microfrontend"></application>
</route>

摆脱错误微前端可能很棘手。

A) 将 React 重构为 HTML ？

single-spa 路由是在 HTML 中定义的，这意味着如果你想渲染一个 React 组件，将很难包含所有逻辑（特别是如果你在组件中使用自定义逻辑）。所以这不是一个可行的选择。

B) 传递 customProps ?

您还可以尝试通过向其传递 customProps 将其替换为现有的微前端：

// top-level layout engine API
const singleSpaRoutes = constructRoutes(template, {
    props: {
        errorPage: true
    },
    loaders: {},
});

...

// single-spa-template
<route path="/test">
    <application name="global-microfrontend"></application>
</route>

<route default>
    <application name="global-microfrontend" customProps="errorPage"></application>
</route>

由于某种原因，这不起作用。在 global-microfrontend 中无法访问 customProps。

我尝试了多种方法来做同样的事情，甚至更改全局微前端的 loadRootComponent：

const lifecycles = singleSpaReact({
    React,
    ReactDOM,
    loadRootComponent: (props) => {
        console.log(props);

        return Promise.resolve(() => <Root />);
    },
});

这也不起作用，这很奇怪，因为如果我查看constructApplications的返回：

// usage
const applications = constructApplications({
    loadApp: ({ name }) => globalThis.System.import(name),
    routes,
});

// result
...
name: 'global-microfrontend',
app: f(),
customProps: f(e, n),
activeWhen: [
    0: f $(),
    1: f(n)

]

似乎 single-spa 知道全局微前端将安装在 2 条路线上，其中一条路线带有自定义道具。

我认为这种方法行不通，因为 single-spa 合并了 props。

C) 哈克方式？

由于没有任何效果，而且我真的很想摆脱微前端的错误，所以我想出了一个解决方法：

// single-spa-template
<route default>
    <div id="PAGE_NOT_FOUND"></div>
</route>

在全局微前端中，加载到应用程序的顶层：

import React, { useEffect, useState } from "react";

const ErrorContent = () => (
    <div>
        <h1>404 not found</h1>
        <h3>Please try visiting another page</h3>
    </div>
);

const ErrorPage = () => {
    const [visible, setVisible] = useState<boolean>(false);

    const checkForPageNotFound = () => {
        const el = document.getElementById("PAGE_NOT_FOUND");

        setVisible(!!el);
    };

    useEffect(() => {
        window.addEventListener("single-spa:routing-event", checkForPageNotFound);

        checkForPageNotFound();

        return () => window.removeEventListener("single-spa:routing-event", checkForPageNotFound);
    }, []);

    return visible ? <ErrorContent /> : null;
};

export default ErrorPage;

这是通过侦听 single-spa:routing-event 事件来实现的，每次触发该事件时，我们都会检查我们在布局定义中添加的 div 是否存在。由于 div 仅在默认路由中渲染，这意味着我们可以自信地渲染 404 页面的内容。

虽然这可能不是最优雅的解决方案，但它使我们能够将 404 逻辑封装在现有的微前端中，并摆脱另一个需要维护的微前端。

如果您发现了其他用于简化基于微前端的架构的创意解决方案，我很想听听您的经验！

以上是single-spa：没有额外微前端的路线的详细内容。更多信息请关注PHP中文网其他相关文章！