Search code examples
javascriptreactjshttp-redirecthttp-status-code-404netlify

Redirected Custom 404 Page is Loading Infinite Times in Netlify Hosting

My website (based on React.js) aritraroy.live is hosted on Netlify. Now, I was trying to add a custom 404 page for my website, as the default 404 page by netlify is not at all satisfying. I followed an article by Rajan Tiwari (https://blog.kiprosh.com/show-custom-404-error-page-for-netlify-applications/), Netlify Documentation, and some StackOverflow questions (Netlify renders 404 on page refresh (using React and react-router)).

Now, any broken link is redirecting to my custom 404 page. 𝐁𝐮𝐭 𝐭𝐡𝐞 𝐏𝐚𝐠𝐞 𝐢𝐬 𝐋𝐨𝐚𝐝𝐢𝐧𝐠 𝐈𝐧𝐟𝐢𝐧𝐢𝐭𝐞 𝐓𝐢𝐦𝐞𝐬 𝐚𝐬 𝐒𝐡𝐨𝐰𝐧 𝐢𝐧 𝐭𝐡𝐞 𝐅𝐨𝐥𝐥𝐨𝐰𝐢𝐧𝐠 𝐏𝐫𝐞𝐯𝐢𝐞𝐰 (run the code snippet).

<div style="width:70%;height:0;padding-bottom:51%;position:relative;"><iframe src="https://giphy.com/embed/4QXdTODkeYx3Rq3Kt0" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>

I have also added the screenshots of the associated files:

the route section route section

custom 404 component custom 404 component

netlify.toml
netlify.toml

404.html 404.html

I couldn't find any possible solution yet. If anyone can help me regarding this issue, It'll be very helpful. Thanks in advance.

Solution

  • I resolved the issue with the help of this article - https://kittygiraudel.com/2017/05/13/using-create-react-app-on-netlify/

    Main Problem:
    When building a client-side React application, routing is usually handled with React Router. Everything works like a charm until you try to load/refresh a page whose path is not /. Then, you hit the 404 wall. Which is just a blank page, really.

    Solution:
    I kept my netlify.toml and 404.html files in root folder and modified the build command in package.json file like following:

    {
  "build": "react-scripts build && cp build/index.html build/404.html"
}

    Now, after running the build command and deploying in Netlify, any broken link is redirecting to my customized 404 page.