React's 404 Refresh Problem on Netlify

Yes, it works (only) on your local computer.

15 Nov 2022

image of number of ones

I was done working on Meta and everything looked perfect. Splendid job. Or so I thought.

Shared the url to a couple of persons and one of them reported that my site was broken.

But... But it works perfectly here.

I went through it myself and discovered a very odd problem.

Yes, it works. But on Netlify, after navigating away from the homepage to a different page, refreshing the site breaks it.

It pulls up the Netlify default error 404 page.

I was stumped and didn't understand why it was happening.

As is often the case, I decided to check online for answers, and sure enough, I found one. On Stackoverflow, of course.

Here is the link to the solution I found that worked.

Apparently you have to add a redirect rule to make it work, and Netlify comes with a very easy way of solving this problem.

To solve this very peculiar problem, here are three easy steps:

  1. Add a netlify.toml file to your root directory.
  2. Paste the following code in it:
  3. 
        [[redirects]]
        from = "/*"
        to = "/"
        status = 200
    
  4. Push your changes to github.

And that was that. Everything worked perfectly afterwards.