I made a simple React app with React router that worked while clicking the links in the nav, but not if you enter those URLs in the location bar.
TLDR – make a file in the public directory called “_redirects” with this line in it
/* /index.html 200
What’s going on here?
I found this page which says netlify only tries to serve the main index.html file https://community.netlify.com/t/common-issue-i-ve-deployed-my-site-but-i-still-see-page-not-found/125
This didn’t really solve my problem but it got me looking around through the forums and I found something that said you need to use “redirects” to handle those pages (the ones that look folders with no index page)
First I found something about putting config information in a netlify.toml file in the root directory of the project. For me, putting the reccommened line in that file failed on build. I came across something that said to put the “_redirects” in my root directory which also didn’t do anything. I ended up doing a lot of clicking around before I got my solution.
Eventually I found a page on the netlify blog that said the “_redirects” file needs to be in the build folder. https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/
My problem here was how my build folder is also in my .gitignore file so it never gets uploaded to github and my site is being built from my git repo! Finally, I realized I could just put the “_redirects” file into the public directory (same place as the index.html file for the site)
I wrote this blog because it took me 20 minutes or more of searching to figure out how to implement 20 characters of code. I’m not complaining about netlify mind you, they are an amazing product. There are a million different combinations of frameworks and languages that they are trying to support so there may not be a simple answer to my particular case. I just had a hard time finding the short answer so I hope to save someone the time solving the same issue.
Thanks for reading!