-1

I built a React app and all of the files are served from the same physical directory on my Nginx server. I use react-router-dom to navigate through the app. Everything works when I first load the app.

I'll navigate to a URL that react-router-dom knows (like http://example.com/blog/posts/) but when I try to refresh the page, Nginx responds with 404 Not Found. I know this is happening because Nginx is looking for a sub-folder on the server that matches /blog/posts.

I can't figure out how to tell Nginx to serve all content from the same root folder regardless of the path in the browser.

So no matter what the path...

/blog  
/blog/posts  
/blog/posts/1  
/contact
/summary/page/4   
....

... all files are served from the same /etc/nginx/sites-available/my.domain.com/html/index.html file on the server (which is the root page of the app)

All of these versions don't work when I refresh the page:

location / {
     alias /etc/nginx/sites-available/my.domain.com/html;
     index index.html;
 }

location / {
     root /etc/nginx/sites-available/my.domain.com/html;
     index index.html;
 }

location ~ ^/ {
     root /etc/nginx/sites-available/my.domain.com/html;
     index index.html;
 }
Marc
  • 1,470
  • 2
  • 16
  • 25

1 Answers1

0

Found the answer here:

https://stackoverflow.com/a/43954597/1067109

location / {
  try_files $uri /index.html;
}
Marc
  • 1,470
  • 2
  • 16
  • 25