React 应用程序客户端路由无法在 DigitalOcean 应用程序平台上运行

Question

我已将我的 React 应用程序部署到 DigitalOcean 应用程序平台。该应用程序使用客户端路由（例如，React Router）。访问根 URL 时，主页可以正常工作，但是当我尝试通过输入 URL（例如 /auth/login）直接导航到其他路由时，出现 404 错误（未找到请求的页面）。但是，在应用程序内导航到该 URL 可以按预期工作。

我尝试使用 DigitalOcean 仪表板中的自定义页面配置包罗万象的路由，但它似乎没有按预期工作。

如何在 DigitalOcean 应用程序平台上正确配置我的 React 应用程序来处理客户端路由并为所有路由提供 index.html 文件？

其他背景：

我的 React 应用程序是使用 Vite 构建的。 我正在使用 React Router Dom 进行客户端路由。 我的应用程序使用默认设置部署在 DigitalOcean 应用程序平台上。

Answer 1

因为这是一个静态站点，所以有一个构建条目，但没有相当于运行服务等的启动脚本。

修复了自定义页面内有一个 Catchall 并简单地指定

index.html

的问题，如下所示： https://docs.digitalocean.com/products/app-platform/how-to/manage-static-sites/

最初，我用

/index.html

尝试过，但失败了。

Answer 2

由于您使用的是

React Router

并且它呈现自己的 404 页面，因此您可以将所有“404 未找到”请求路由到

index.html

。然后，React 可以查看 URL，如果路由不存在，则生成 404 页面。以下是具体操作方法：

• 从您的数字海洋仪表板，导航至您的应用程序平台应用程序
• 单击组件
• 选择静态站点“您的静态站点名称”
• 展开“自定义页面”部分。
• 类型选择“Catchall”并输入

  index.html