score:1

ok, after reading tons of answers on so i finally got it to work.

firstly, a great answer from user @panther here react.js application showing 404 not found in nginx server

when your react.js app loads, the routes are handled on the frontend by the react-router. say for example you are at http://a.com. then on the page you navigate to http://a.com/b. this route change is handled in the browser itself. now when you refresh or open the url http://a.com/b in the a new tab, the request goes to your nginx where the particular route does not exist and hence you get 404.

to avoid this, you need to load the root file(usually index.html) for all non matching routes so that nginx sends the file and the route is then handled by your react app on the browser.

so, as he recommended i've changed my config like

location / {
  try_files $uri $uri/ /index.html @backend;
  }
                      
location @backend {
  proxy_pass http://localhost:8080;
 }

but this gave me some weird errors.

so i have to write location for every path i have, like this:

location / {
  try_files $uri $uri/ @backend;
  }
  
location /devices {        // here my path is similar as in react 
                           // router 
  try_files $uri $uri/ /index.html;
}

Related Query

More Query from same tag