react-router 组件渲染在 AWS s3 存储桶中不起作用

Question

我目前一直在研究使用 react-router 在 AWS s3 存储桶中渲染组件的问题。 我在我的反应应用程序中创建了一个导航 header 并根据单击的按钮路由到不同的“页面”。 这是一个例子：

在我的 header 组件中，我有以下按钮和 function 路由到适当的位置

<button id="navButton" onClick={this.linkManagerDashboard}>Dashboard</button>

linkManagerDashboard = (event) => {
    window.location = 'https://ledgerly.s3.amazonaws.com/ManagerDashboard'
}

我还将 window.location 切换到 /index.html/ManagerDashboard 无济于事。 这在我的本地测试环境中当然可以正常工作。 然后我继续通过我的主应用程序组件（在我的本地测试环境中也可以正常工作）呈现管理器仪表板组件：

<Route path="/ManagerDashboard" render={() => (<ManagerDashboard></ManagerDashboard>)} />

在我将代码上传到 AWS s3 存储桶之前，一切正常。 （我确实运行了 build 命令来创建构建文件）。 I added the files to the s3 bucket, enabled static web hosting, and included index.html as my default page AND error document under the static website hosting options in the s3 settings. 但是，当我单击任何按钮时，会出现以下错误：

This XML file does not appear to have any style information associated with it. The document tree is show below.
<Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>267DAD08ABA2000B</RequestId>
    <HostId>A+VvgfKAMKb2AvtAARx2PtGiSjx7FG57c7DrzrwtRmQZF81YQfdwGrETZ43ihXoWKXAhf41iI0c=</HostId>
</Error>

初始页面正确呈现。 当我尝试单击其中一个导航按钮时会发生此错误。 我发现了一些有关创建允许公共流量的策略的信息。 这是该政策：

{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "AddPerm",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::ledgerly/*"
    }
]

}

这让我感到困惑，因为包含“ledgerly/ ”的资源行向我表明，任何 url (/index.html) 之后的 url 子名称都是可以接受的......我不明白为什么导航不会工作。 为什么我的策略中的 /不允许渲染所有项目资源和位置？ 请帮忙！！

Answer 1

AWS S3 不提供开箱即用的 SPA 重定向规则。 您需要在Static Website Hosting部分下添加重定向规则。

<RoutingRules>
    <RoutingRule>
        <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <ReplaceKeyWith>index.html</ReplaceKeyWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

现在，所有404将根据 SPA 的需要重定向到index.html 。