Fixing route error when refreshing with F5 in React (react-router-dom) using nginx

Tiempo de lectura: < 1 minuto

Today I share a solution to properly configure the nginx.conf file to make it compatible with react-router-dom route management.

To solve the error, we need to add the line try_files $uri $uri/ /index.html; inside the nginx.conf file

 http{
...
server {
        listen       80;
        server_name  localhost;

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

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

Leave a Comment