时间戳

首页 > 解决方案 > AWS s3 存储桶上的 React-Router 位置不起作用

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

问题描述

我将我的静态反应应用程序托管在 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 位置的公共访问，以便我可以从初始端点访问任何位置。我怎样才能解决这个问题？

标签： javascriptreactjsamazon-web-servicesamazon-s3react-router

解决方案

你有几个选择。

选项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 中删除哈希，因此在 rootindex.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

推荐阅读