Как настроить конфигурационный файл Nginx для React Router Dom?

Question

[Кирилл]

На SPA для маршрутизации используются вложенные пути: "site.com/dir/page".
При подобных путях Nginx пытается найти файл в вложенной директории: "/dir/page".

При поисках решении сконфигурировал nginx.conf:

events {

}
http {
    include mime.types;
    server {
        listen 80;
        root /usr/share/nginx/html;

        location / {
            root /usr/share/nginx/html;
            try_files $uri /index.html;
        }
    }
}

Проблема была решена только при первой вложенности: "site.com/dir".
При большей вложенности nginx больше не выдает ошибку сервера, но и не отображает содержимое компонентов React.

Как решать подобную проблему SPA с React Router Dom?

Comments

[Антон Горецкий]

По моему, вы хотите сделать какую-то дичь. SPA - это одностраничное приложение - зачем ему маршрутизация сервера Nginx?
React Router Dom в SPA осуществляет реакцию на переход по различным ссылкам, но в реальности приложение не переходит по этим ссылкам, в необходимых случаях происходит запрос на сервер, где расположена бакэнд часть приложения, которая высылает json c ответными данными. Обработка различных путей приложения - часть логики приложения, а не сервера Nginx.

Answer 1

[Кирилл]

Проблема была решена элементарно.
Сборкой в проекте занимается webpack.

Для prod сборки была забыта ключевая настройка:

output: {
        publicPath: '/'
}