使用React和AWS Amplify路由到静态HTML

Question

我已经使用React建立了一个网站，现在正在使用AWS Amplify来托管它。我正在尝试设置重定向到位于/public目录中的静态HTML文件的Routes。当我在本地测试时，一切都很好，但Routes在站点部署后就不起作用了。

这就是我的Routes。

<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)$)([^.]+$)/>

每当我试图从部署的站点访问这些静态HTML文件时，控制台不会发出任何警告或错误，但加载了一个空页面。我的Amplify应用程序上是否有一些设置需要修改？谢谢

Answer 1

从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
}
]

Answer 2

尝试删除react路由器条目，并在放大控制台中添加一些重写/重定向，例如：

/page1/public/page1/index.html 200

/page2/public/page2/index.html 200

这可能会为您提供一些使用重写/重定向的解决方案的想法。我自己也用过，但不确定未来它的可维护性。