404 error when i refresh/reload page everysingle page other than landing page. React app with react-router-dom

[daman-m]

Hi,

I built a React app using react-router-dom.

website: https://notinstadevelopment.netlify.app/
github: GitHub - daman-m/notInsta at development

The issue is whenever i reload or refresh a page other than the landing page (the link above), i get an error message saying page not found. The site works locally and is reloads just fine locally. Everything works perfectly locally, no errors in console, routing properly and all. I’ve tried adding a redirects file and the issue still persists.

Error Message :

Page Not Found

Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

Back to our site

If this is your site, and you weren’t expecting a 404 for this path, please visit Netlify’s “page not found” support guide for troubleshooting tips.

---

[nathanmartin]

@daman-m When you say “I’ve tried adding a redirects file and the issue still persists”… what did you put in the redirects file?

This is almost certainly the issue you’re experiencing:

Page Not Found when using home link or details page link

@blogfreerecipe This is occurring because your site is a react based SPA (Single Page Application). When you visit the site via the root / it is automatically loading the index.html which is your application, and then when you visit other pages you never actually leave the index.html page (it just looks like you do). So /recipeDetails/110133d3dd574821a9ab17b9d160d06d loads in additional data and simulates a browser page change. However when you make a fresh request for example by going to one…

I explained “why it works” as an answer to another user here:

Can't Go To Page via URL Address Bar

@kautif What about it don’t you understand? It works because it proxies every request made to your site to the /index.html file, basically it returns the /index.html file no matter what URL you access the site via. So instead of a request to /user/games trying to return a file from /user/games.html (or /user/games/index.html), the proxy causes it to return /index.html at which point the route (/user/games) is handled by your react application… which only exists on that single index.html page.

[daman-m]

@nathanmartin I appreciate the speedy reply, the following is the line in my redirects file:

/*    /index.html   200

[nathanmartin]

@daman-m I presume that build is the folder that you have set as your Publish directory for Netlify?

Out of curiosity, have you performed your build locally and confirmed that the _redirects file remains?

[daman-m]

@nathanmartin So when i performed the build locally, the _redirects file got deleted

[nathanmartin]

@daman-m Excellent, as I’d suspected that’s why your _redirects aren’t working.
The file must be in the output that Netlify deploys.

It differs depending on the system you’re working with, but in your case I’d imagine you want to put the file into your public folder, so that it is copied into the build folder when the build is executed.

[daman-m]

@nathanmartin It works! Thank you so much Nathan! I’ve been trying to figure this out for the past 6 hours. Really appreciate your guidance

[nathanmartin]

@dzenebieri

how exactly? what is code it needs to fix it? can u reply with screenshots where will be code how to fix it. thank

I understand you’re experiencing an issue, but nobody is going to add screenshots to an issue that was basic “user error” and resolved 7 months ago.

Your own issue may be the same, or it may be different.

This was also never a “code issue”, so there is no code required to be demonstrated to fix it.

It’s all exactly as this conversation (and the documentation) explain, which is that the _redirects file must end up in the Publish directory.

Netlify will only read the file from that location, if it’s anywhere else then it will not be read and your redirects will not be applied.

The issue here was that the user was putting the file directly into their Publish directory, which was being automatically destroyed and recreated on every build, meaning the file didn’t actually exist in the output.

So to debug your own project, run your build locally, then ensure your _redirects file is in the folder you have specified as your Publish directory. If it isn’t, determine why it isn’t and fix it.