Блог

Я пытаюсь запустить приложение React за обратным прокси — сервером, у которого есть префикс(скажем root-prefix ) и вторичный префикс(скажем subdirectory/path ).

Окончательный URL-адрес имеет форму https://myserver.com/root-prefix/subdirectory/path

Я добавил basename для подкаталога:

  <BrowserRouter basename="/subdirectory/path">
                <Header />
                    <Switch>
                        <Route
                            path="/componentA"
                            component={componentA}
                        />
                        <Route
                            path="/componentB"
                            component={componentB}
                        />
                    </Switch>
                <Footer />
 </BrowserRouter>
 

URL сервера: https://myserver.com/root-prefix/subdirectory/path : При этом отображается путь с верхним и нижним колонтитулами без основного содержимого.

Когда я нажимаю на определенный компонент, он отображается, но имеет форму https://myserver.com/subdirectory/path/componentA (Примечание root-prefix удалено).

Мой nginx.conf

 http {

server {

location ^~ /subdirectory/path {
      # proxy_pass ${upstream}; # Getting 502: Bad Gateway
      absolute_redirect off;
      add_header Access-Control-Expose-Headers "Origin";
      add_header Access-Control-Allow-Methods "GET,POST,PUT,DELETE";
      try_files $uri $uri/ /index.html;
    }
}

}
 

Является внутренним удалением маршрутизатора React root-prefix . Если да, то каков подход для учета root-prefix всех компонентов.

Примечание: Префикс root-prefix в location Nginx дает 404 для всего приложения.

вам нужно включить root-prefix это в базовое имя:

 <BrowserRouter basename="/root-prefix/subdirectory/path">