react.js application showing 404 not found in nginx server

by

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)

More Related Contents:

  1. React app exiting in docker container with exit code 0
  2. react app showing empty page when redirecting on production build
  3. Is there a “Best Practices” on designing an application written both in React and React-Native?
  4. Programmatically navigate using React router
  5. React setState not Updating Immediately
  6. My React Component is rendering twice because of Strict Mode
  7. How to set one component’s state from another component in React
  8. Template not provided using create-react-app
  9. Is it possible to use if…else… statement in React render function?
  10. Component does not remount when route parameters change
  11. How to cancel a fetch on componentWillUnmount
  12. React.createElement: type is invalid — expected a string
  13. Handling async request with React, Redux and Axios?
  14. react setState with dynamic key
  15. Remove console.logs with Webpack & Uglify
  16. How do I custom style the underline of Material-UI without using theme?
  17. Reactjs: Unexpected token ‘
  18. React – the right way to pass form element state to sibling/parent elements?
  19. Warning: It looks like you’re using the development build of the Firebase JS SDK
  20. Pass multiple parameters to event handlers in React
  21. How to resolve “Cannot use import statement outside a module” from Jest when running tests?
  22. How to minimize the size of webpack’s bundle?
  23. How to enable file upload on React’s Material UI simple input?
  24. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  25. React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a in .”
  26. How to bundle a React app to a subdirectory on a server?
  27. How to test Async Storage with Jest?
  28. Children won’t render when using a layout in ReactJS
  29. How do I window removeEventListener using React useEffect
  30. Cannot find module ‘sass’

Leave a Comment