When I was reloading my React application it's not loading and throwing 404 error

Question

Initially, we conducted extensive research and experimentation using open source solutions to address the issue. Take a example domain, "https://example.com," was working seamlessly on our hosted server with nginx. However, when attempting to access certain application routes like "https://example.com/terms" or "https://example.com/privacy," we were encountering a 404 error indicating that the application was not found.

Answer 1

Basically React is a single page application when we try to load the other /terms or /privacy it is pointing out to other location then we have changed configuration of nginx

here is the nginx configuration ::

# nginx server configuration 
server {
    listen      0.0.0.0:443 ssl;
    server_name example.com www.example.com;
    ssl_certificate      /home/admin/conf/web/ssl.example.com.pem;
    ssl_certificate_key  /home/admin/conf/web/ssl.example.com.key;
    error_log  /var/log/apache2/domains/example.com.error.log error;
    access_log  /var/log/apache2/domains/example.com.log combined;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Host $remote_addr;
        client_max_body_size 50M;

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin: $http_origin');
            add_header 'Access-Control-Allow-Origin: GET, POST, DELETE, PUT, PATCH, OPTIONS');
            add_header 'Access-Control-Allow-Credentials: true');
            add_header 'Vary: Origin');
        }

        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, PATCH, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;

        # point out to your react application of build folder in your production
        root /usr/local/html;
        index index.html;
        try_files $uri /index.html$is_args$args;
    }

}