react 路由器不适用于 S3 中的嵌套路径

Question

我的react-router-dom设置如下：

<Router>
    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/post/:slug" element={<Post />} />
        // other routes
    </Routes>
</Router>

我的前端托管在 S3 存储桶中，并通过 CloudFront 发行版提供服务。除了“/post/:slug”路线之外，我的所有路线都有效。这很奇怪，因为如果我使用 useNavigate 挂钩导航到帖子，它会起作用并使用正确的 slug 加载帖子。但是，如果我在帖子页面上重新加载或直接在浏览器中输入帖子网址（即 https://BASE_URL/post/slug/），它只会显示一个空白页面，并且似乎无法识别路线。我很茫然，因为如果我在本地运行前端，则后路由就可以工作。当我使用 S3 和 CloudFront 进行部署时，它不起作用。

对于 CloudFront 主机，我将所有路径“*”转发到我的 S3 存储桶。我还添加了一个错误页面以转发到 /index.html 根对象。

Answer 1

只需将错误文档指向

index.html

即可。

此外，您还可以将 HTTP 响应代码设置为 200（如果适用）。