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

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