React路由器在AWS S3存储桶中不起作用

Question

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

如果转到www.mywebsite.com，它会起作用，并且如果单击a标记转到“项目”和“关于”页面，它将带我到正确的页面。但是，如果我复制并发送页面url或直接转到以下链接：www.mywebsite.com/projects，它将返回404。

这是我的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>
);

Answer 1

2020年5月1日更新：

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

因此，您可以选择一些方法来解决此问题：

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

1. 你可以把一个指定的文件错误 的error.html 在 公共 您的应用程序做出反应的文件夹，并在 静态网站托管 ： 错误的文件 中，放于： 的error.html 。这也有效。我已经测试过了

2. 使用 AWS CloudFront > CloudFront分发 >存储桶的分发> 错误页面， 然后添加所需的错误代码。如果您不使用react-router（例如下面的示例），则存储桶将响应 Error 403， 因此您可以使用 error.html 进行响应。

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