React’s 404 Refresh Problem on Netlify
Yes, it works (only) on your local computer.
Jun 28, 2023
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:
- Add a netlify.toml file to your root directory.
- Paste the following code in it:
[[redirects]] from = "/*" to = "/" status = 200 - Push your changes to github.
And that was that. Everything worked perfectly afterwards.
