Question

There is 404 error in sub link after build then copy to the server directory

hi, i build the react project and i copied the built-folder to the /var/www/mydomain directory. it is going well in the main domain and sub link. but when i navigate to some sub link, then after refresh, there is 404 error, according to my experience, it is why there is client-side rendering. i use nginx and ubunt 22, how to fix this issue?


Submit an answer


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!

Sign In or Sign Up to Answer

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 Iliev
Site Moderator
Site Moderator badge
February 20, 2024
Accepted Answer

Hey!

The issue you’re facing is common in single-page applications like those built with React when they’re served by web servers not configured to handle their routing mechanism properly.

SPAs typically use client-side routing to navigate between different parts of the application without the need for a full page refresh. When you refresh a page or try to access a sub-route directly, the server tries to find a resource at that path, which does not exist because all routing is handled client-side.

To fix this, you need to configure your Nginx server to always serve the index.html file of your React app for any route, allowing React Router (or whichever client-side router you’re using) to handle the route appropriately.

Here’s how you can configure your Nginx server to properly serve your React app and fix the 404 error on refresh or direct access to sub-routes:

  1. Open your Nginx configuration file for editing. This file is typically located at /etc/nginx/sites-available/your_domain. If you’ve created a symbolic link in /etc/nginx/sites-enabled/, you should edit the file in the sites-available directory.

  2. Modify the server block that serves your React application. You’ll want to add or update a location block to serve index.html for any request that doesn’t match a file or directory. Here is a sample configuration:

    server {
        listen 80;
        server_name mydomain.com www.mydomain.com;
    
        root /var/www/mydomain;
        index index.html;
    
        location / {
            try_files $uri $uri/ /index.html;
        }
    
        # Other configuration...
    }
    

    In this configuration:

    • listen specifies the port Nginx listens on.
    • server_name sets the domain names for this server block.
    • root specifies the root directory where the files are located.
    • index defines which file to serve by default.
    • The location / block with try_files $uri $uri/ /index.html; tells Nginx to first attempt to serve the requested file or directory, and if it doesn’t exist, fall back to serving index.html. This allows your React app’s client-side router to take over and handle the route.
  3. Check your Nginx configuration for syntax errors by running sudo nginx -t.

  4. Reload Nginx to apply the changes with sudo systemctl reload nginx.

This setup should resolve the issue with 404 errors when refreshing or directly accessing sub-routes in your React application. It ensures that Nginx serves your index.html file for any route, allowing the client-side router to handle the path appropriately.

Let me know how it goes!

Best,

Bobby

KFSys
Site Moderator
Site Moderator badge
February 21, 2024

Heya,

The issue you’re encountering is a common one with single-page applications (SPAs) like those built with React, especially when using client-side routing. When you refresh a page at a subpath, the server tries to locate a file at that specific path, which doesn’t exist because all routing is handled by the client-side JavaScript. This results in a 404 error.

To fix this issue, you need to configure your NGINX server to always serve the index.html file for any request that doesn’t match a static file. This way, the React application can take over and render the correct component based on the URL.

Here’s a basic configuration snippet you can add to your NGINX configuration file:

server {
    # ... other configurations ...

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

This should resolve the 404 error you’re experiencing on page refreshes. Remember to also check the permissions and ownership of your files in /var/www/mydomain to ensure that NGINX can access them.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel