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

Question

我的静态 React 应用程序托管在 AWS s3 存储桶中。它呈现良好。但是，我正在利用 react-router-dom 在“页面”之间导航。 (我启用了公共(public)访问，启用了静态网站托管，将我的索引文档列为 index.html)。例如，我的存储桶网站端点是 http://

Answer 1

您有几个选择。

选项#1:

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

选项#2:

如果您不想使用那样的路径，可以使用一个稍微老套的解决方案。在“重定向规则”下的存储桶设置中，您可以添加如下内容:

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

这表示，“任何时候您收到对不存在路径的请求时，将 /path 替换为 /#/path。现在它使用散列参数为主页提供服务。

最后，我们要从 url 中删除散列，所以在根目录中 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