使用 React 和 AWS-Amplify 路由到 static HTML

Question

我已經使用 React 建立了一個網站，現在正在使用 AWS-Amplify 來托管它。 我正在嘗試設置重定向到/public目錄中的 static HTML 文件的路由。 當我在本地測試時一切正常，但是在站點部署后路由不起作用。

這就是我的路線。

<BrowserRouter>
    <Routes>
        .
        . // Other unrelated Routes here..
        .
        <Route path="/page1" render={() => {window.location.href="page1/index.html"}} />
        <Route path="/page2" render={() => {window.location.href="page2/index.html"}} />
        <Route path="/page3" render={() => {window.location.href="page3/index.html"}} />
    </Routes>
</BrowserRouter>

我的 200（重寫）的重寫和重定向設置當前是：

</^[^.]+$|\.(?.(html|css|gif|ico|jpg|jpeg|js|png|PNG|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

每當我嘗試從已部署的站點訪問這些 static HTML 文件時，控制台不會給出任何警告或錯誤，但會加載 null 頁面。 我需要在 Amplify 應用程序上修改一些設置嗎？ 謝謝！

Answer 1

嘗試刪除您的 react-router 條目並在放大控制台中添加一些重寫/重定向，例如：

/page1 /public/page1/index.html 200

/page2 /public/page2/index.html 200

這可能會給您一些使用重寫/重定向的解決方案的想法。 我自己使用過它，但不確定它的可維護性如何。

Answer 2

在應用程序設置下的 AWS Amplify 控制台左側邊欄中，單擊重寫和重定向。

單擊右側的“編輯”，然后在同一位置單擊“打開文本編輯器”

您的配置應該如下所示。

[
{
    "source": "/static-folder-in-public/<*>",
    "target": "/static-folder-in-public/<*>",
    "status": "200",
    "condition": null
},
{
    "source": "/static/<*>",
    "target": "/static/<*>",
    "status": "200",
    "condition": null
},
{
    "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|json|xml)$)([^.]+$)/>",
    "target": "/",
    "status": "200",
    "condition": null
}
]