当我重新加载我的 React 应用程序时，它没有加载并抛出 404 错误

Question

最初，我们使用开源解决方案进行了广泛的研究和实验来解决这个问题。 以域“https://example.com”为例，它在我们的托管服务器上使用 nginx 无缝运行。但是，当尝试访问某些应用程序路由（如“https://example.com/terms”或“https://example.com/privacy”）时，我们遇到了 404 错误，表明找不到该应用程序。

Answer 1

基本上 React 是一个单页应用程序，当我们尝试加载其他 /terms 或 /privacy 时它指向其他位置然后我们更改了 nginx 的配置

这里是nginx配置::

# 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;
    }

}