React, after deployment on netlify routes give 404 page not found on refesh

Question

I am trying to learn how to fix the following issue.

1. After deploying my react app on netlify, when I refresh any of my routes at https://candid-cobbler-cd2c3e.netlify.app/ or manually load https://candid-cobbler-cd2c3e.netlify.app/red it gives me a 404 page not found error.

The site works find if I use buttons to navigate.

Solutions that I have tried so for :

1. _redirects was added to the root folder with /* /index.html 200 built and re-deployed. Did Not Work

2. netlify.toml was added to root folder [[redirects]] from = "/*" to = "/" status = 200 built and re-deployed Did Not Work

Take a look at my files : https://github.com/swappybizz/routing_refresh_on_deployment/

Answer 1

There is a useful tutorial by hBlev : https://www.youtube.com/watch?v=e6qXUS3C550 where at 10:00 , it has been explained the following :

1. Netlify serves only Index.html
2. Everything in the Public directory gets build and src gets bundled.
3. The _redirects has to be in the Public directory for the routing to work on refresh or manual loading
4. The statement /* /index.html 200 is a to from statusCode and the * represents all possibilities and it is going to redirect them to index.html which is actually the only thing served. Buth the status code 200 helps keep the /path and not letting it redirect to the url but Render while keeping the path

details could be found [here]:https://docs.netlify.com/routing/overview/

Same site was redeployed to https://teal-mermaid-ada4e6.netlify.app and now routes could be refreshed or directly loaded i.e by clicking https://teal-mermaid-ada4e6.netlify.app/red