在 nginx 中刷新后反应项目给出错误

Question

我已经设置了 wordpress (/) 并将构建文件夹 (/map) 设置为 nginx 中的设置。 conf文件看起来像这样

upstream index_php_upstream {
    server 127.0.0.1:8090;
}

upstream direct_php_upstream {
    server 127.0.0.1:8091;
}
upstream react_point {
server 127.0.0.1:3000;
}
server {
    listen 80 default_server;
        listen [::]:80 default_server ipv6only=on;
        server_name _;
    root        /var/www/html/wordpress/public_html;
index index.html index.php;
# log files
access_log /var/log/nginx/sample.com.access.log;
error_log /var/log/nginx/sample.com.error.log;

location = /favicon.ico {
log_not_found off;
access_log off;
}

location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}

location / {
try_files $uri $uri/ /index.php?$args;
}

location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php7.2-fpm.sock;
}

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires max;
log_not_found off;
}
   location ^~ /map {
       alias /opt/urbanwater/build/;
index index.html index.html;
       try_files $uri $uri/ /map/index.html?$args =404;
    }

}

当我正常使用它时，该应用程序运行良好。 但是当我刷新 map 中的子页面例如/map/explore-towns时，它会将我带到 Wordpress 页面，说 404 未找到。

这里可能是什么问题？

Answer 1

因为 react 应用程序的路由是客户端路由。 如果您将 go 直接指向/map/some-thing ，则 nginx 将尝试将其重定向到属于 WP 的/index.php 。 所以它会抛出 404 not found 。

要修复它，您需要配置您的 nginx，将/map的每个请求重定向到/map/index.html 。 然后，反应应用程序将按预期工作。

也许这个配置会有所帮助：

// add below your `location / {}`
location /map {
 try_files $uri /index.html;
}