4

I have a react frontend app that uses react-router to create different routes. On development server its working fine but when I build the project it gives me 404 while accessing it with different routes directly. Website perfectly opens with xyz.net. And it gives 404 when I try to access it with xyz.net/login.

Here is my nginx conf

server {

listen 80;
server_name  xyz.net www.xyz.net;
root /root/frontend/react/build/;
index index.html;


location /api/ {

    include proxy_params;
    proxy_pass http://localhost:8000/;
}

}

Nipun Garg
  • 628
  • 2
  • 8
  • 22

1 Answers1

6

This worked for me when I ran into this issue:

location / {
                #...
                try_files $uri $uri/ /index.html$is_args$args;
                #...  
      }

However, I've encountered errors in other projects using *.ejs templates for development builds, and *.html plugins for production builds with webpack. The answer to which I found here:

React-router issue when refreshing URLs with SSL Enabled

Hope that helps.

Rob
  • 14,746
  • 28
  • 47
  • 65
hammerabi
  • 76
  • 3
  • Thanks for the heads up. I don't see anything pertaining to linking to internal S/O links as bad practice however (in the link you provided). It seems very common actually, can you point me to a reference where this is clearly stated as a no-no? – hammerabi Oct 31 '17 at 03:44
  • No problem! I appreciate the insight nonetheless. Cheers! – hammerabi Oct 31 '17 at 03:50
  • Thanks, and it worked. – Nipun Garg Oct 31 '17 at 08:07