Question

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

这是AWS上有问题的用例：

而不是root myapp.com，用户输入不同的路由，例如myapp.com/login，然后尝试导航到该网站（此时不在网站上）
用户获得NoSuchKey login错误

如果我在本地尝试相同，它可以正常工作。此外，如果我首先在AWS上运行root，然后导航到任何其他路由，它也可以正常工作。所以问题只是第一条必须在AWS上运行以加载站点的路由。我猜我的应用程序有问题，但我不确定是什么。

这是我的代码的一部分，用于渲染顶部组件的render方法的路径：

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文件（{ {1}}）但不能 - 因此错误。

我认为你遇到的问题是反应路由器在客户端进行所有路由处理和路由 - 服务器上没有物理资源（或者，在你的情况下，S3）路线。

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

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

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

马克·加罗（Marc Garreau）有一篇关于这个主题的精彩文章here，也可以帮助你。

部署到AWS

1 个答案: