英文:

React app client-side routing not working on DigitalOcean App Platform

问题

I have deployed my React app to the DigitalOcean App Platform. The app uses client-side routing (e.g., React Router). The home page works correctly when visiting the root URL, but when I try to navigate directly to other routes by entering the URL (e.g., /auth/login), I get a 404 error (The requested page was not found). However, navigating within the app to that URL works as expected.

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

I have tried configuring catch-all routing using custom pages in the DigitalOcean dashboard, but it doesn't seem to work as intended.

我尝试使用DigitalOcean仪表板中的自定义页面配置了全捕获路由，但似乎未按预期工作。

How can I properly configure my React app on the DigitalOcean App Platform to handle client-side routing and serve the index.html file for all routes?

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

Additional context:

My React app is built using Vite.
I am using React Router Dom for client-side routing.
My app is deployed on the DigitalOcean App Platform using the default settings.

额外的上下文：

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

英文:

I have deployed my React app to the DigitalOcean App Platform. The app uses client-side routing (e.g., React Router). The home page works correctly when visiting the root URL, but when I try to navigate directly to other routes by entering the URL (e.g., /auth/login), I get a 404 error (The requested page was not found). However, navigating within the app to that URL works as expected.

I have tried configuring catch-all routing using custom pages in the DigitalOcean dashboard, but it doesn't seem to work as intended.

How can I properly configure my React app on the DigitalOcean App Platform to handle client-side routing and serve the index.html file for all routes?

Additional context:

My React app is built using Vite.
I am using React Router Dom for client-side routing.
My app is deployed on the DigitalOcean App Platform using the default settings.

答案1

得分: 1

因为这是一个静态站点，DO 有一个构建入口但没有等同于运行 serve 等的启动脚本。

修复方法是在自定义页面内添加 Catchall，并简单地指定 index.html，如此文档中所述：
https://docs.digitalocean.com/products/app-platform/how-to/manage-static-sites/

最初，我尝试使用 /index.html，但失败了。

英文:

Because this is a static site DO had a build entry but no start script equivalent to run serve etc.

Fix was having a Catchall within custom pages and simply specifying index.html as documented here:
https://docs.digitalocean.com/products/app-platform/how-to/manage-static-sites/

Initially, I tried it with /index.html which failed.