在 React 項目中打開一個 static HTML

Question

我有一個 React-Typescript 項目結構，如下所示：

/src
    /components
        /navigation
            Routes.tsx
            Navbar.tsx
            Footer.tsx
        /main
            Main.tsx
    /error
        403.html //Newly created static HTML

我想創建另一個錯誤組件，它將具有 Static HTML。 由於它有很多依賴項，因此無法轉換為 Javascript ，我想在我的項目中使用這樣的 static HTML 。

我需要能夠使用以下命令調用 static：localhost:4321/error/403.html。 為此，我嘗試像這樣調用 Route：

<Route exact path="/error/403.html" render={() => {window.location.href="/src/error/403.html"}} />

但我收到 TypeScript 錯誤說明： (JSX attribute) render?: ((props: RouteComponentProps<any, StaticContext, unknown>) => React.ReactNode) | undefined (JSX attribute) render?: ((props: RouteComponentProps<any, StaticContext, unknown>) => React.ReactNode) | undefined

這是調用 static 網頁的正確方法嗎？

Answer 1

您可以將 static HTML設置為innerHTML ，如下所示，

const path = require("path");
const fs = require("fs");

const loadHTML = async () => {
    const filePath = path.resolve(__dirname, 'relative', 'path', 'to', 'your', 'html');
    const html = await fs.readFile(filePath, 'utf8');
    return html;
}

<Route exact path="/error/403.html" render={() => <div dangerouslySetInnerHTML={{ __html: loadHTML()}}/> } />