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

Question

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

这是 AWS 上有问题的用例：

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

如果我在本地尝试相同的方法，则效果很好。此外，如果我首先在 AWS 上进入 root，然后导航到任何其他路线，它也可以正常工作。所以问题只是第一条路由，它必须是 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 试图在该路径 ( /login)处找到一个 HTML 文件，但不能 - 因此错误.

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

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

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

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

马克·加罗有一个伟大的文章在这里关于这个问题可以帮助你了。