AWS s3 存储桶上的 React-Router 位置不起作用

Question

我的静态 React 应用程序托管在 AWS s3 存储桶中。它渲染得很好。然而，我正在利用react-router-dom在“页面”之间导航。（我已启用公共访问，启用静态网站托管，将我的索引文档列为index.html）。例如，我的存储桶网站端点是 http://<bucketname.s3-website-us-east-1.amazonaws.com。当我点击链接到 http://<bucketname.s3-website-us-east-1.amazonaws.com/Support 的导航按钮之一时，它要么将我重定向到索引页面，要么给我一个 403 错误（取决于我是否使用存储桶网站端点或index.html对象url）。不管怎样，关键是我无法访问任何比主页最顶层更具体的 URL 路径。它不允许我路由到更具体的位置/不同的页面。我对此进行了相当多的研究，并且正在拔掉我的头发。重定向规则似乎不是一个可以接受的答案。我的理由是，如果每次尝试访问不同页面时都会收到 403 错误，则重定向回索引并不是一个可行的解决方案。我想允许公共访问所有 URL 位置，以便我可以从初始端点访问任何位置。我怎样才能解决这个问题？

Answer 1

你有几个选择。

选项1：

最简单的是使用HashRouter而不是BrowserRouter. 这将使更改路径看起来像http://<bucketname.s3-website-us-east-1.amazonaws.com#/Support（注意#）。由于哈希仅由浏览器处理，因此它不会更改到服务器的请求路径。请注意，这解决了任何静态主机的问题，而不仅仅是 s3，因此也适用于 github-pages。

选项#2：

如果您不想拥有这样的路径，那么有一个稍微有点hacky的解决方案。在“重定向规则”下的存储桶设置中，您可以添加如下内容：

[
  {
    "Condition": {
      "HttpErrorCodeReturnedEquals": "403"
    },
    "Redirect": {
      "ReplaceKeyPrefixWith": "#/"
    }
  }
]

这表示，“每当您收到对不存在路径的请求时，请替换/path为/#/path。现在它使用哈希参数为主页提供服务。

最后，我们要从 url 中删除哈希值，因此在 root 中index.js，在渲染 之前<App />，您可以执行以下操作：

import { createBrowserHistory } from 'history'

const replaceHashPath = () => {
  const history = createBrowserHistory()
  const hash = history.location.hash
  if (hash) {
    const path = hash.replace(/^#/, '')
    if (path) {
      history.replace(path)
    }
  }
}
replaceHashPath()

这会在实际渲染任何内容之前运行，用非哈希版本替换浏览器历史记录中的 URL，现在一切都会按预期工作。

在此处阅读有关重定向规则的更多信息： https: //docs.aws.amazon.com/AmazonS3/latest/userguide/how-to-page-redirect.html