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中文網其他相關文章！