Скачать или смотреть Solving the 404 Error Issue on Page Refresh in Nginx for React Apps

Encountering `404 errors` when refreshing pages in your React app deployed with Nginx? Discover how to fix it with our comprehensive guide!
---
This video is based on the question https://stackoverflow.com/q/76040359/ asked by the user 'soccerway' ( https://stackoverflow.com/u/4826215/ ) and on the answer https://stackoverflow.com/a/76049748/ provided by the user 'soccerway' ( https://stackoverflow.com/u/4826215/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: While refreshing the page in browser getting 404 in nginx

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Solving the 404 Error Issue on Page Refresh in Nginx for React Apps

When deploying a React application, one common issue developers face is encountering 404 errors upon refreshing pages in their browsers. This problem can become quite frustrating, as it prevents users from navigating smoothly through your app. This guide will help you understand where the issue lies and how to fix it effectively in your Nginx configuration.

Understanding the Problem

You have deployed your React app on a server using Nginx, but when you navigate to a page and refresh it, the browser throws a 404 error. The reason behind this issue is that when Nginx receives a request for a specific route (such as /about), it may try to find a corresponding file and fail, leading to a not found (404) error.

Common Symptoms of the Issue

When refreshing on a route, the following error appears:

404 Not Found

Errors indicating issues with the configuration like:

System error: net::ERR_BLOCKED_BY_CLIENT

This can often happen if your Nginx configuration does not correctly handle client-side routing for React applications.

Solution: Update Nginx Configuration

To address this issue, you'll need to modify your Nginx configuration file to handle routes properly. Here’s a step-by-step breakdown of what needs to be done:

Steps to Fix the Configuration

Add a location Block for Root Routes:

In addition to your existing location /service { ... } block, you should create a separate block for handling the root paths.

The main goal of this block is to ensure that requests for routes of the React app are handed over to the index.html file.

[[See Video to Reveal this Text or Code Snippet]]

Configure Proxying for API Calls:

If your application also makes use of API endpoints (like /service/listOfBlogs), you need a separate block for these calls.

This ensures that requests starting with /service are proxied to your backend server without being processed by the React router.

[[See Video to Reveal this Text or Code Snippet]]

Complete Nginx Configuration:

Here’s how your entire Nginx configuration should look once all changes have been made:

[[See Video to Reveal this Text or Code Snippet]]

Restart Nginx:

After making changes to the configuration file, remember to restart the Nginx service to apply these changes:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following the steps outlined in this guide, you should be able to eliminate the 404 error when refreshing your React application in the browser. With the correct Nginx configuration, your app can serve pages seamlessly, ensuring a smooth user experience. If you run into further issues, consider checking the Nginx logs for any errors, or reach out to your community for additional support.

Happy coding!