How to fix Error 404 on Netlify for SPAs built with Reactjs

Introduction

Hosting a React application on the Netlify platform often runs into an “Error 404”. This is because an app built with Reactjs is a SPA (Single Page Application). Routing is done on the application and no HTTP calls are made to f…


This content originally appeared on DEV Community and was authored by Naftali Murgor

Introduction

Hosting a React application on the Netlify platform often runs into an "Error 404". This is because an app built with Reactjs is a SPA (Single Page Application). Routing is done on the application and no HTTP calls are made to fetch pages server-side.

To fix this error,

  1. go to the public folder of your application
  2. create a file name _redirects( no file extension)
  3. add the following content to the _redirects file: 
/*    /index.html   200
  1. Rebuild the application and the error is fixed.

This tells Netlify to route all redirects to the index.html which is the root entry of your application. In Firebase hosting, this is usually handled inside a config file inside the project root.


This content originally appeared on DEV Community and was authored by Naftali Murgor


Print Share Comment Cite Upload Translate Updates
APA

Naftali Murgor | Sciencx (2022-01-31T20:25:47+00:00) How to fix Error 404 on Netlify for SPAs built with Reactjs. Retrieved from https://www.scien.cx/2022/01/31/how-to-fix-error-404-on-netlify-for-spas-built-with-reactjs/

MLA
" » How to fix Error 404 on Netlify for SPAs built with Reactjs." Naftali Murgor | Sciencx - Monday January 31, 2022, https://www.scien.cx/2022/01/31/how-to-fix-error-404-on-netlify-for-spas-built-with-reactjs/
HARVARD
Naftali Murgor | Sciencx Monday January 31, 2022 » How to fix Error 404 on Netlify for SPAs built with Reactjs., viewed ,<https://www.scien.cx/2022/01/31/how-to-fix-error-404-on-netlify-for-spas-built-with-reactjs/>
VANCOUVER
Naftali Murgor | Sciencx - » How to fix Error 404 on Netlify for SPAs built with Reactjs. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/31/how-to-fix-error-404-on-netlify-for-spas-built-with-reactjs/
CHICAGO
" » How to fix Error 404 on Netlify for SPAs built with Reactjs." Naftali Murgor | Sciencx - Accessed . https://www.scien.cx/2022/01/31/how-to-fix-error-404-on-netlify-for-spas-built-with-reactjs/
IEEE
" » How to fix Error 404 on Netlify for SPAs built with Reactjs." Naftali Murgor | Sciencx [Online]. Available: https://www.scien.cx/2022/01/31/how-to-fix-error-404-on-netlify-for-spas-built-with-reactjs/. [Accessed: ]
rf:citation
» How to fix Error 404 on Netlify for SPAs built with Reactjs | Naftali Murgor | Sciencx | https://www.scien.cx/2022/01/31/how-to-fix-error-404-on-netlify-for-spas-built-with-reactjs/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts