Routing React Apps hosted on Netlify

fix 404 issues from Netlify with a _redirects file

Wed, 02 Jan 2019

React is a single page application which means all web pages are served from the same location(index.html). A standard html site would have a seperate index file for each page that would be served by the server. Since this isn’t the case for React, you need to create a _redirects in order to get your routes working.

The _redirects file is a file that tells Netlify where it should redirect the clients based on the address or route that they are attempting to request. Our React router takes care of all the routing so all we need to do is have Netlify redirect any request to index.html.

Code

  1. Create a file named _redirects inside of your public folder, there is no file extension.
  2. The code for the file

    /*    /index.html   200
  3. Rebuild and deploy your project
  4. Test it out!
Buy Me A CoffeeDigitalOcean Referral Badge
Loading...
Edward Beazer

Edward Beazer - I just like to build shit. Sometimes I get stuck for hours, even days while trying to figure out how to solve an issue or implement a new feature. Hope my tips and tutorials can save you some time.

DigitalOcean Referral Badge