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

Question

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

在我的标题组件中，我有以下按钮和函数路由到适当的位置

<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 命令来创建构建文件）。我将文件添加到 s3 存储桶，启用静态 Web 托管，并将 index.html 作为我的默认页面和错误文档包含在 s3 设置中的静态网站托管选项下。但是，当我单击任何按钮时，都会出现以下错误：

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。