Create React App Breaks After Deployment on Refresh 404 With Nginx

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. To do this you have to make the below change in your nginx.conf or sites-enabled appropiately

location / {
 try_files $uri /index.html;
}

This tells nginx to look for the specified $uri, if it cannot find one then it send index.html back to the browser. (See https://serverfault.com/questions/329592/how-does-try-files-work for more details)

How to avoid 404 error when reload a page in react?

When you reload your page, you get a 404 because your first hit the server before you actually receive the html document response, and your server is probably only configured to send your index.html upon GET '/'

You need to setup your server to catch all incoming url (/*) and render your index.html

Have a look to this detailed answer for more insights: React-router urls don't work when refreshing or writing manually

React 404 when attempting to call a URL only in production

Fixed by adding --spm to the pm2 serve build 80 command

And the suggestion was taken from this answer

React-router and nginx

The location block in your nginx config should be:

location / {
  try_files $uri /index.html;
}

The problem is that requests to the index.html file work, but you're not currently telling nginx to forward other requests to the index.html file too.

Deploy single page application Angular: 404 Not Found nginx

I finally found the answer:
After I generated the dist folder.

• I created a file called Staticfile and put it in the dist folder
• I opened Staticfile & I added this line pushstate: enabled

pushstate enabled keeps browser-visible URLs clean for client-side JavaScript apps that serve multiple routes. For example, pushstate routing allows a single JavaScript file route to multiple anchor-tagged URLs that look like /some/path1 instead of /some#path1.

---

Related Topics