Netlify renders 404 on page refresh (using React and react-router)

This was simple and it worked for me. I found this link https://create-react-app.dev/docs/deployment#netlify

So as suggested by that link, I added a _redirects file inside the /public folder like /public/_redirects. I then pasted /* /index.html 200 into the _redirects file. I did all that in my VS Code, after which I pushed to github and then ofcourse my netlify re-deploys automatically everytime I push to github. My problem was solved and refresh nolonger brings the 404 error.

In my package.json, the build section looks like this;

"scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
}

Note: Some articles say that you need to add _redirects in the build folder, but then build folder is not among what gets pushed to github in my case, so that's why adding _redirects to public folder worked better for me, as the public folder can be pushed along with my code.

Add netlify.toml file to the root directory of your project and paste the following code in it:

[[redirects]]
  from = "/*"
  to = "/"
  status = 200

push and redeploy your app and it's done.