Page Not Found when using home link or details page link

[blogfreerecipe]

Hello,

I am getting a Page Not Found error when using a link to the home page or a details page. If you refresh from the home page, the site works as expected after that. But from the details page, you can’t refresh to get any content. Please help!

*site: rad-figolla-82ec83

• custom domain: blogfreerecipe.com

I have checked to make sure that the downloaded deploy file does contain the index.html file.

The build settings do have a publish directory name.

I tried posting pictures to verify, but was blocked from doing so.

Thanks!

[SamO]

Hi @blogfreerecipe ,

Welcome to the forums. Can you confirm if you are specifying in the deploy settings which folder to publish?

If your project has a build which generates the site to publish, you’ll need to tell Netlify where to find that directory.

Perhaps you can share a screenshot of what your deploy settings look like?

[blogfreerecipe]

Sure thing, and thank you for your help!

[SamO]

Hmm, weird and you set your index.html? Can you share your repo as well please?

[blogfreerecipe]

It won’t let me (as a new user) upload the zip file, but here is a screen shot to verify the html file is there:

[nathanmartin]

@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 of those sub pages directly or hitting refresh while on them (e.g. https://www.blogfreerecipe.com/recipeDetails/110133d3dd574821a9ab17b9d160d06d), the web server is being requested to serve that file… but the file doesn’t actually exist… hence the 404 error.

The way around this is via redirects, you’ll want to have a _redirects file in your deploy folder that contains:

/*    /index.html   200

You can see it referenced in the documentation here:

Rewrites and proxies

[blogfreerecipe]

@nathanmartin

/* /index.html 200

Thank you! That fixed it for me and yay

[SamO]

Hi @blogfreerecipe glad it worked for you! Thanks @nathanmartin for engaging with our community members to help them get unstuck. We appreciate you and your efforts.

[blogfreerecipe]

Thank you both! I really appreciate it

[snail]

I’m experiencing the issue with the details page link. When I try to use it, I’m not able to access the page details. This seems to only work if I’ve already browsed to the page, which is not ideal if I want to share a link. The redirect doesn’t seem to work unless I’ve already follow the links on my site to the detail page. Any suggestions on how I can fix this issue?"

[jasiqli]

Can you share the URL for your site, and the git repository you are deploying from @snail ?

[SamO]

What site are you experiencing this?

Did you see this brand new guide on debugging redirects?

I strongly suggest you give it a thorough read through and see if this fixes your problem:

[Support Guide] Making redirects work for you - troubleshooting and debugging

Last Reviewed By Netlify Support Staff December 2022 Introduction You’ve put blood, sweat and tears into building an incredible static site with all the bells and whistles. However, you’ve configured some redirect rules and you’ve come unstuck… they don’t appear to be working! Ensure you’ve followed the correct guidance Our redirects and rewrites document covers a broad range of use cases, from status codes to proxying another service and everything in between. Ensure you’re using the corr…

if not, please post again, and we’ll try and troubleshoot.

[snail]

Thanks for the response @jasiqli @SamO . I’m realizing that adding the redirect is working as a solution for most cases.

My error has to do with:
“Failed to load resource: the server responded with a status of 404 (Not Found).”

I am following a tutorial that uses Thirdweb contracts Build and Deploy a Web3 Blockchain Crowdfunding Platform (Kickstarter) - YouTube
You can find the code here GitHub - adrianhajdin/project_crowdfunding: With a stunning design, connected to the blockchain, metamask pairing, interaction with smart contracts, sending Ethereum through the blockchain network, and writing solidity code.
and the netlify app here https://merry-sable-a248bd.netlify.app/ (without redirect)

I’ve cloned the repo and added the _redirects /* /index.html 200 and deployed here https://verdant-pavlova-483070.netlify.app/ (with redirects)

I think I will try and connect with someone at thirdweb to see if they can guide me to a solution.

[jasiqli]

One things of note I see on both deployed sites is a site blocked by AVG

Not sure if there is a typo somewhere with a missing l (i.e. gmai.com instead of gmail.com.)