如何静态提供包含路由的反应应用程序？

Question

我有一个在后端运行 Express 的网站，我在其中定义了一个 api 并为我的构建目录提供服务。我的应用如下所示：

function App() {
    return (
        <BrowserRouter>
                <Route path="/" component={Home} exact />
                <Route path="/explore" component={Explore} exact />
        </BrowserRouter>
    );
}

我希望能够将构建目录放入 S3 存储桶，然后将我的 API 请求发送到硬编码位置。

问题是，当我打开 index.html 时，我的和组件不呈现。有哪些可能的解决方案？

Answer 1

这是客户端路由的一个常见缺陷，从索引开始导航会起作用，但当用户刷新或从另一个页面启动会话时（例如通过单击链接）会失败。

这是因为不会有任何/explore 页面，因为整个应用程序都捆绑在一个 index.html 文件中。

要使其工作，您必须将 S3 配置为在找不到请求的页面时提供 index.html，方法是将 index.html 设置为错误文档 explained in this answer。

Answer 2

尝试改用HashRouter，如下所示：

import { HashRouter } from 'react-router-dom';

function App() {
    return (
        <HashRouter>
            //your Routes here
        </HashRouter>
    );
}

Answer 3

在 S3 管理控制台的静态网站托管下，将错误页面设置为 index.html。