Question

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

Posted on February 20, 2024
Deployment React
Asked by GiantCyanWalrus

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!

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

• 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:

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.
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.
Check your Nginx configuration for syntax errors by running sudo nginx -t.
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

• 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.