Featured AI Products
Compute
Build, deploy, and scale cloud compute resources
Containers and Images
Safely store and manage containers and backups
Managed Databases
Fully managed resources running popular database engines
Management and Dev Tools
Control infrastructure and gather insights
Networking
Secure and control traffic to apps
Security
Help protect your account and resources with these security features
Storage
Store and access any amount of data reliably in the cloud
Browse all products
AI/ML
CMS
Data and IoT
Developer Tools
Gaming and Media
Hosting
Security and Networking
Startups and SMBs
Web and App Platforms
See all solutions
Community
Documentation
Developer Tools
Get Involved
Utilities and Help
Become a Partner
Marketplace
Pricing

- Community
- DigitalOcean
- Community
- DigitalOcean

React routing not working on static site

Posted on October 21, 2024

I successfully deployed my ReactApp onto an App Platform as a static site in the base directory. The home page loads, but every other link goes to a 404. So, it appears that the routing is not working.

I’ve looked up the following solutions: -Set “index.html” as a custom catch-all page. This just makes every link go back to the home page, and some other very odd behaviour when my Axios REST calls fail, which seem to return a copy of index.html -Add “routes” to the app spec My app spec yaml file does not have any routes. Not sure where to put it.

The routing has never been a problem in development on my local machine. Does anyone know how to solve this?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby

October 21, 2024

Hey there! 👋

If your project is open-source, feel free to share the link and I’d be happy to take a look and try to reproduce the problem!

Besides that, since static hosting doesn’t handle dynamic routes by default, a page refresh or direct link to any route other than the home page usually results in a 404 error.

In most cases, the solution is to create a rule that directs all traffic to index.html so that React Router can manage the routing internally. You mentioned setting “index.html” as a custom catch-all page—this should allow React to interpret the routes correctly, rather than redirecting everything back to the home page.

I’ve fixed that in the past by in the DigitalOcean App Platform, by going to App settings and adding a catch-all route that points to index.html for any unmatched routes. This makes sure that React Router can handle all client-side routing as expected.

Also, make sure you’re using BrowserRouter in your React app, and that it’s properly configured to handle history-based routing. This will ensure your routes work both on the initial load and when navigating within the app.

For the other requests you mentioned, be sure to enable the ‘Preserve Path Prefix’ option as well.

Let me know if this helps or if you’re still running into issues!

- Bobby

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

View all products

Start building today

From GPU-powered inference and Kubernetes to managed databases and storage, get everything you need to build, scale, and deploy intelligent applications.