React Router Глубокая связь параметризованных маршрутов с Nginx - PullRequest
Новая
       27

React Router Глубокая связь параметризованных маршрутов с Nginx

0 голосов
/ 13 мая 2019

У меня есть веб-сервер Nginx, настроенный для обслуживания приложения React JS. Приложение React использует React Router для выполнения маршрутов. У меня также есть серверы с REST API, к которым обращается приложение React.

У меня проблема с тем, что некоторые маршруты в моем приложении React могут загружаться, если я обновляю страницу. Например, если я захожу на сайт www.myapp.com/Users напрямую (не заходя на сайт www.myapp.com/ и не переходя туда), мое приложение конфигурации и Regin Nginx может загрузить файл index.html, содержащий приложение React, а затем загрузить правильный маршрут в приложении React.

Однако, тогда у меня есть параметризованные URL-маршруты, такие как www.myapp.com/User/:username, которые не работают. Это действительно странно. Если я запускаю свое приложение реагирования на локальном хосте с «npm start», тогда появляются параметризованные URL, если я перезагружаю страницу по некоторому параметризованному маршруту. Однако, как только я поместил его на свой рабочий сервер с Nginx, обслуживающим файл index.html, он больше не работает. Однако, если я использую ссылку из React Router, я все равно могу перейти к параметризованному URL-адресу, и он отображается правильно. Это не работает, только когда я перезагружаю веб-страницу или перехожу к параметризованному маршруту на моем производственном сервере Nginx. Все остальное работает нормально.

Мой файл конфигурации для Nginx выглядит следующим образом. Просто примечание, /etc/nginx/rest_proxy.conf просто содержит пропуск прокси. Я сомневаюсь, что это проблема. У меня много директив / location. Все они идут на серверные серверы REST API, которые у меня есть. Общая директива "location /" - это то, что должно загружать мое приложение 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 /: имя пользователя не работает, но то же самое относится и к моему / Question /: id маршруту.

Любая помощь приветствуется.

...