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.

kernelrpc_mach_vm_protect
  • 35
  • 1
  • 8

2 Answers2

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

Chris Perry
  • 6,666
  • 3
  • 11
  • 21
Harshdeep Singh
  • 64
  • 6
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.

kernelrpc_mach_vm_protect
  • 35
  • 1
  • 8
  • A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](https://meta.stackexchange.com/a/8259) 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. – cursorrux Jul 05 '22 at 12:03