0

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.

Improve this question

2 Answers 2

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it is there, then quote the most relevant part of the page you are linking to in case the target page is unavailable.
0

The following steps will help you:

  1. In your route section, change the code from <Route path={"404_error"} element={<PageNotFound />} /> to <Route path={"*"} element={<PageNotFound />} />

  2. In your netlify.toml, paste the following code:

      [[redirects]]  
  from = "/*"  
  to = "/index.html"  
  status = 200

  3. No need for creating 404.html page

Improve this answer

1 Comment

It'll redirect to the home page. But I don't want that. I want to show my customized 404 page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.