反应路由器在 aws s3 存储桶中不起作用

javascript reactjs amazon-s3 amazon-web-services

2022-08-30 04:26:02

我将 React 网站文件夹部署到 AWS S3 存储桶中。build/

如果我转到，它可以工作，如果我单击标签转到“项目”和“关于”页面，它会将我引导到正确的页面。但是，如果我复制并发送页面URL或直接转到链接，例如：，它将返回404。www.mywebsite.comawww.mywebsite.com/projects

这是我的代码：App.js

const App = () => (
    <Router>
        <div>
            <NavBar/>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/projects" component={Projects}/>
                <Route exact path="/about" component={About}/>
                <Route component={NoMatch}/>
            </Switch>
        </div>
    </Router>
);

答案 1

我不确定你是否已经解决了它。我有同样的问题。

这是因为 AWS S3 正在寻找要从中提供服务的文件夹（项目），而您没有该文件夹（项目）。

只需将错误文档指向。index.html

这对我有用。您可以在 react-router 中处理错误页面。

答案 2

2020年5月1日更新：

由于这篇文章非常活跃，我需要更新答案：

因此，您有几种选择来解决此问题：

您可以将索引.html放在错误文档框中（如 Alan Friedman 建议的那样）。
- 转到您的存储桶（实际具有代码的存储桶 - 而不是您用于重定向的存储桶） - > 属性 - > 静态网站托管：
- 这不是“黑客”，但它的工作原理是：它处理来自前端的请求并将用户路由到其他路由，但总的来说，React应用程序是一个单页应用程序。react-router
- 如果你想要服务器端的 React，请考虑使用 Next.js。

您可以将指定的错误文件错误.html放在 React 应用程序的公用文件夹和“静态网站托管：错误文档”框中，放入：error.html。这也有效。我已经测试过了。
使用 AWS CloudFront > CloudFront 分配>存储桶的分配>错误页面，并添加所需的错误代码。如果您不使用（如下面的示例所示），存储桶将使用错误 403 进行响应，以便您可以使用错误.html进行响应。react-router

对于，当前不支持它，因此您应该考虑选项 2 和 3。他们将根据此线程在将来的版本中更新库。TypeScriptreact-router6.*