I have developed a blog site using React hooks and deployed on netlify. I could see the blog contents loaded successfully. But during on click on the ..more >> link on the website, throwing page not found 404 error. This is working fine locally, but I am facing the issue after deploying in netlify. Could someone please help to resolve the issue.
netfliy site link: https://agitated-nobel-2ec304.netlify.app/
Technical details:
Blog site developed using React hooks.
Blog contents loaded from contentful via api.
Try adding a _redirects file with the contents: /* index.html 200.
Where do I add the -redirects file with the contents /* index.html 200 ?
If I create _redirects text file and /* index.html 200 will it work ?
I said try. We’re trying to get to the bottom of the issue, and we can do that only by eliminating the obvious. If it doesn’t work maybe we can try something else.
Will try for sure, I was trying to make sure that I understand your solution properly.
Yes, basically the name of the file should be _redirects and there’s no extension. It would have the contents /* index.html 200. It would go in your publish path.
I have created a file as suggested and pushed new changes. But couldn’t get that sorted out.
Any other solution to try ?
Would it be possible to share repo? Any example website with a setup as similar to yours would do.
Can I private message the repo details ?
Sure you can. However, the problem is the lesser are the chances of receiving help. But if the information needs to be private, sharing privately is possible.
Once you access i will remove the entry from here.
Yes, I’ve downloaded it, you can remove it.
For a start, you’ve created a file names _redirects.txt while I mentioned, the file should not have any extension.
Furthermore, you can check if the file has successfully been deployed if you see this:
I saw below log after adding _redirects file with said entry
1 out of 1 redirect rule could not be processed. Check your site’s /_redirects for verification. You can learn more in the docs, or test your rules in the Netlify playground.
In /_redirects:
- /* index.html 200
Ahh my bad, it should be /* /index.html 200. Notice the / before index.html. Could you please try again with this?
1 Like
Thank you Hrishikesh…This is now working. Could you please explain what is happening around >> /* /index.html 200
A typical website will have the file structure as /about/index.html and this file will be served when you visit /about/. This is what Netlify needs too, or else it returns a 404 like it did for you.
React doesn’t generate such a file and relies on JavaScript for navigation. Thus, since the file doesn’t exist, Netlify shows the 404 page. However, with the redirect rule above, all your files (/*) load the same /index.html if they don’t exist on server. It’s a proxy redirect, thus your users always see the correct URL in their address bars, but React is able to see the URL and load the required page accordingly.
1 Like