首页 > web前端 > js教程 > 正文

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

Patricia Arquette
发布: 2024-09-27 18:36:03
原创
410 人浏览过

single-spa:  route without an additional microfrontend

在本文中,我们将探索一种通过删除专用错误页面微前端来简化单 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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板