How to setup Nginx config file for React Router Dom?

Question

Nginx

The SPA uses nested paths for routing: "site.com/dir/page".
With paths like this, Nginx tries to find the file in a subdirectory: "/dir/page".

When looking for a solution, I configured 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;
        }
    }
}

The problem was solved only with the first nesting: "site.com/dir".
With more nesting, nginx no longer throws a server error, but it also does not display the contents of the React components.

How to solve similar SPA problem with React Router Dom?

Answer 1

The problem was solved in an elementary way.
The assembly in the project is handled by webpack.
A key setting was forgotten for the prod build:

output: {
        publicPath: '/'
}