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