部署到 AWS 时反应应用程序路由问题

Question

我正在使用 React Router 4 开发 React 应用程序（使用 Create React App）。在本地，一切正常，但是当我将其部署到 AWS 时（将其放入 S3 存储桶，然后通过 Cloudfront 提供服务） ，它确实有效，但路线存在问题。

这是 AWS 上有问题的用例：

• 不是root myapp.com，而是用户输入不同的路线，例如myapp.com/login，然后尝试导航到该站点（当时不在该站点上）
• 用户收到NoSuchKey login 错误

如果我在本地尝试相同，它工作正常。此外，如果我先在 AWS 上进入根目录，然后导航到任何其他路线，它也可以正常工作。所以问题只是为了加载站点必须在 AWS 上成为 root 的第一条路由。我猜我的应用出了点问题，但我不确定是什么问题。

这是我的代码的一部分，用于来自被渲染的顶部组件的渲染方法的路由：

return (
  <Router>
    <Fragment>
      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/forgot-password" component={ForgotPassword} />
      <Route path="/signup" component={SignUp} />
      <Route path="/help" component={Help} />
    </Fragment>
  </Router>
);

有什么想法吗？

Answer 1

NoSuchKey 错误实际上是来自 S3 的错误 - 而不是您的应用程序本身，所以我认为正在发生的事情是用户正在导航到该路径，而 S3 正试图在该路径中查找 HTML 文件 (/login ) 但不能 - 因此出现错误。

我相信您遇到的问题是反应路由器在客户端执行所有路由处理和路由 - 服务器（或者，在您的情况下，S3）上没有具有实际路由的物理资源.

因此，首先加载索引然后导航将起作用，因为此时，您的浏览器已经加载了处理客户端路由的 JavaScript。直接导航到路由（除了索引之外的任何内容）将导致 S3 尝试查找该物理文件并将失败 - 如果这有意义的话。

我认为您需要更改 S3 中的设置以始终加载您的索引文件 - 即使出现错误。您可以通过转到 S3 存储桶的属性、转到静态网站托管并将 index.html 文件设置为索引文档和错误文档来执行此操作。

这样，当 S3 遇到 NoSuchKey 错误时，它将回退到您的 index.html 文件 - 此时 react 路由器将接管并确定应用程序应该在哪个路由上。

Marc Garreau 有一篇关于该主题的精彩文章 here，也可能对您有所帮助。