在本文中，我們將探索一種透過刪除專用錯誤頁微前端來簡化單 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中文網其他相關文章！
