How To Fix 404 Not Found Error When Refreshing React.js Pages On Nginx?

Published September 19, 2024

Problem: 404 Errors on React.js Page Refresh with Nginx

React.js apps often get 404 errors when you refresh pages served by Nginx. This happens because Nginx doesn't route requests to the React app's index.html file correctly. This file is needed for client-side routing to work properly.

Solution: Configuring Nginx for React.js Applications

Modifying Nginx configuration file

To fix the 404 error when refreshing React.js pages on Nginx, you need to change the Nginx configuration file. Here's how to do it:

Find the Nginx configuration file: The Nginx configuration file is usually in one of these folders:
- /etc/nginx/nginx.conf
- /usr/local/nginx/conf/nginx.conf
- /usr/local/etc/nginx/nginx.conf
Add the try_files directive: Open the configuration file and add this location block inside the server block:

location / {
    try_files $uri $uri/ /index.html;
}

This tells Nginx to look for the requested file ($uri), then the directory ($uri/), and if neither exists, serve the index.html file.

Restart Nginx to apply changes: After changing the configuration file, restart Nginx to use the new settings. Use one of these commands:

sudo systemctl restart nginx

sudo service nginx restart

By following these steps, you'll set up Nginx to handle React.js routing correctly, fixing the 404 error issue when refreshing pages.

Tip: Verify Nginx Configuration

After making changes to the Nginx configuration file, it's a good practice to verify the syntax before restarting the server. You can do this by running the following command:

nginx -t

This command checks the configuration file for any syntax errors. If the configuration is valid, you'll see a message saying "syntax is okay" and "test is successful". If there are any errors, the command will point out the specific issues, allowing you to correct them before restarting Nginx.

Implementing the Fix: Step-by-Step Guide

Editing the Nginx configuration

To edit the Nginx configuration:

Open the Nginx configuration file with a text editor. You may need root privileges:

sudo nano /etc/nginx/nginx.conf

Add the location block inside the server block:

server {
    ...
    location / {
        try_files $uri $uri/ /index.html;
    }
    ...
}

Set up the try_files directive as shown above. This tells Nginx to look for the requested file ($uri), then the directory ($uri/), and if neither exists, serve the index.html file.
Save the file and exit the text editor.

Tip: Backup Your Configuration

Before making changes to your Nginx configuration, it's a good practice to create a backup of the original file. You can do this by running:

sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.backup

This allows you to easily revert changes if needed.

Testing the solution

After making the changes:

Restart Nginx to apply the new configuration:

sudo systemctl restart nginx

Open your React.js application in a web browser.
Navigate to different pages within your application.
Refresh the pages, including those with complex routes.
Check that the pages load correctly without 404 errors.
Verify that direct access to URLs (e.g., typing them in the address bar) works as expected.

If you don't see 404 errors when refreshing or accessing pages directly, the configuration change was successful. Your React.js application should now work with Nginx.

	English
	Deutsch
	Français