Question

我已经设置了一个Nginx Web服务器来服务React JS应用程序。 React应用程序使用React Router进行路由。我还拥有运行React应用程序访问的REST API的后端服务器。

我遇到一个问题，如果我在页面上刷新，我的React应用程序中的某些路由可以加载。例如，如果我直接访问www.myapp.com/Users（而无需访问www.myapp.com/并导航至该站点），则我的Nginx配置和React应用程序可以加载包含React应用程序的index.html文件，然后加载在React应用中正确的路线。

但是，然后我已经设置了无效的URL路由，例如www.myapp.com/User/:username。真的很奇怪如果我使用“ npm start”在本地主机上运行我的react应用，则如果我通过某些参数化路线重新加载页面，则会出现参数化URL。但是，一旦我将它放在由Nginx提供index.html文件的生产服务器上，它将不再起作用。但是，如果我使用来自React Router的链接，我仍然可以导航到参数化URL，并且它会正确显示。仅当我重新加载网页或直接转到Nginx生产服务器上的参数化路径时，它才起作用。其他一切都很好。

我的Nginx配置文件如下。仅需注意，/ etc / nginx / rest_proxy.conf仅包含一个代理通行证。我怀疑这是问题所在。我有很多/ location指令。他们都去了我拥有的后端REST API服务器。一般的“位置/”指令是应该加载我的React应用程序。

worker_processes 2;
worker_rlimit_nofile 65535;

error_log /var/log/nginx/error.log crit;

events {
    multi_accept on;
    worker_connections 4096;
    use epoll;
}

http {

    tcp_nopush on;
    tcp_nodelay on;
    gzip on;
    gzip_comp_level 1;

    log_format custom '$remote_addr - $remote_user [$time_local] '
                            '"$request" $status $body_bytes_sent '
                            '$upstream_addr - $upstream_response_time - $request_time '
                            '"http_referer" "$http_user_agent" ';

    upstream myapp1 {
        server 127.0.0.1:3001;
        #server 192.168.122.24:3001;
        server 192.168.122.25:3001;
        server 192.168.122.32:3001;
        server 192.168.122.36:3001;
        server 192.168.122.33:3001;

        keepalive 64;
    }

    server {
        listen 80;
        server_name _;

        root /var/www/react/frontend/build;
        index index.html;

        access_log /var/log/nginx/access.log custom;

        include /etc/nginx/mime.types;


        location = /adduser {
            include /etc/nginx/rest_proxy.conf;
        }
        location = /login {
            include /etc/nginx/rest_proxy.conf;
        }
        location = /logout {
            include /etc/nginx/rest_proxy.conf;
        }
        location = /verify {
            include /etc/nginx/rest_proxy.conf;
        }
        location = /search {
            include /etc/nginx/rest_proxy.conf;
        }
        location = /CheckLoginStatus {
            include /etc/nginx/rest_proxy.conf;
        }
        location = /DropDatabase {
            include /etc/nginx/rest_proxy.conf;
        }
        location = /ConfigureDatabase {
            include /etc/nginx/rest_proxy.conf;
        }
        location = /addmedia {
            include /etc/nginx/rest_proxy.conf;
        }

        location /questions/ {
            include /etc/nginx/rest_proxy.conf;
            break;
        }
        location /user/ {
            include /etc/nginx/rest_proxy.conf;
            break;
        }
        location /answers/ {
            include /etc/nginx/rest_proxy.conf;
            break;
        }
        location /media/ {
            include /etc/nginx/rest_proxy.conf;
            break;
        }

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

    }
}

这是我的React Router路由声明。就像我说的那样，一切在我的本地计算机上都可以正常运行，因此我高度怀疑这是我使用Nginx进行的设置。

    render() {

        var status = this.state.loggedIn;

        return (
        <React.Fragment>
            <NavBar loggedIn={status} />
            <Route exact path = "/" render={ (props) => <Home {...props} loggedIn={status} getLoginStatus={this.getLoginStatus} setLoginState={this.setLoginState} /> } />
            <Route path="/Questions" render={ (props) => <QuestionsPage {...props} notification={this.state.notification} loggedIn={status} getLoginStatus={this.getLoginStatus} setLoginState={this.setLoginState} /> }  />
            <Route path="/Question/:id" render={ (props) => <QuestionPage {...props} notification={this.state.notification} loggedIn={status} getLoginStatus={this.getLoginStatus} setLoginState={this.setLoginState} /> }  />
            <Route path="/Users" render={ (props) => <UsersPage {...props} notification={this.state.notification} loggedIn={status} getLoginStatus={this.getLoginStatus} setLoginState={this.setLoginState} /> } />
            <Route path="/User/:username" render={ (props) => <UserPage {...props} notification={this.state.notification} loggedIn={status} getLoginStatus={this.getLoginStatus} setLoginState={this.setLoginState} /> } />
        </React.Fragment>
        );
    }

我给出了参数化的/ User /：username路由不起作用的示例，但同样适用于我的/ Question /：id路由。

欢迎任何帮助。

使用Nginx进行React Router深度链接参数化路由

0 个答案: