Question

我在Nginx VPS服务器上部署React时遇到问题。我的根文件夹中有WordPress安装，“ my-app”文件夹中有应用程序。

当我第一次打开目录应用程序时，可以在组件之间进行切换。但是，当我刷新页面时，会得到一个404页面。

package.json：“主页”：“ http://xxxxxx.com/my-app”，

和App.js：

在本地使用Mamp Pro可以工作，因为我正在使用Apache。我已经尝试过Google的多种设置，但似乎无济于事。

谁可以帮助我？

我的nginx配置：

upstream php-handler-http {
    server 127.0.0.1:9000;
    #server unix:/var/run/php5-fpm.sock;
}

server {
    listen 80 default_server;
    server_name xxxxxx.com;
    #server_name wordpress.example.com;

    root /var/www/html/;
    index index.php index.html;

    # set max upload size
    client_max_body_size 2G;
    fastcgi_buffers 64 4K;

    access_log /var/log/nginx/wordpress_http_access.log combined;
    error_log /var/log/nginx/wordpress_http_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 ~* \.(htaccess|htpasswd) {
        deny all;
    }

    location ~ \.php(?:$|/) {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_pass php-handler-http;
        fastcgi_read_timeout 60s;
    }

    # set long EXPIRES header on static assets
    location ~* \.(?:jpg|jpeg|gif|bmp|ico|png|css|js|swf)$ {
        expires 30d;
        access_log off;
    }

}

Answer 1

我不是PHP后端程序员，但是React路由不像Angular（React-router urls don't work when refreshing or writing manually）中的客户端路由那样工作。

在Node中，我通常添加一条捕获所有路由以发回索引，也许PHP中有类似的东西：

app.get('*', function(req, res) {
    res.sendfile('./public/index.html');
});

Answer 2

我会尝试，将package.json主页设置为“ ./my-app”。

我以前发现这很有用，因为您的应用程序中现在有客户端和服务器端路由：React-router urls don't work when refreshing or writing manually

Answer 3

我在 Nginx 和 Ubuntu 上遇到了同样的问题，修复如下 -

打开您网站的 Nginx sites-available 配置文件

sudo nano /etc/nginx/sites-available/default

并将位置部分更改为以下内容：

location / {
    try_files $uri /index.html;
}

注意： 就我而言，我将管理面板主题放在 admin 目录中，就像这样 - “/var/www/html/admin”，所以我必须使用以下 -

location /admin {
    try_files $uri /admin/index.html;
}

React Router V4-刷新404错误-Nginx问题？

3 个答案: