I have a custom 404 page in react app but it's not rendering insteand it's showing netlify 404 page

Support
, ,
1

Site Name: https://blogapp-ts-mui.netlify.app/

i have a route path <route path=“*” elemenet={

404 not found

}
but it’s not rendering when i go to not existing page it’s rendering netlfy 404 page

Build Log:

8:57:06 PM: build-image version: b99b04bce77f7c739cbd5eebb242ff3ddb54ba7b (focal)
8:57:06 PM: buildbot version: b99b04bce77f7c739cbd5eebb242ff3ddb54ba7b
8:57:06 PM: Fetching cached dependencies
8:57:06 PM: Starting to download cache of 90.3MB
8:57:08 PM: Finished downloading cache in 1.423s
8:57:08 PM: Starting to extract cache
8:57:09 PM: Finished extracting cache in 1.154s
8:57:09 PM: Finished fetching cache in 2.623s
8:57:09 PM: Starting to prepare the repo for build
8:57:09 PM: Preparing Git Reference refs/heads/master
8:57:09 PM: Parsing package.json dependencies
8:57:11 PM: Starting to install dependencies
8:57:11 PM: Started restoring cached Node.js version
8:57:12 PM: Finished restoring cached Node.js version
8:57:12 PM: v16.19.1 is already installed.
8:57:12 PM: Now using node v16.19.1 (npm v8.19.3)
8:57:12 PM: Enabling Node.js Corepack
8:57:12 PM: Started restoring cached build plugins
8:57:12 PM: Finished restoring cached build plugins
8:57:12 PM: Started restoring cached corepack dependencies
8:57:12 PM: Finished restoring cached corepack dependencies
8:57:12 PM: No npm workspaces detected
8:57:12 PM: Started restoring cached node modules
8:57:12 PM: Finished restoring cached node modules
8:57:13 PM: Installing npm packages using npm version 8.19.3
8:57:13 PM: up to date, audited 144 packages in 420ms
8:57:13 PM: 20 packages are looking for funding
8:57:13 PM: run npm fund for details
8:57:13 PM: found 0 vulnerabilities
8:57:13 PM: npm packages installed
8:57:14 PM: Python version set to 3.8
8:57:14 PM: Using PHP version 8.0
8:57:15 PM: Attempting Ruby version 2.7.2, read from environment
8:57:15 PM: Using Ruby version 2.7.2
8:57:16 PM: Started restoring cached go cache
8:57:16 PM: Finished restoring cached go cache
8:57:16 PM: Installing Go version 1.19.5 (requested 1.19.5)
8:57:22 PM: go version go1.19.5 linux/amd64
8:57:24 PM: Install dependencies script success
8:57:24 PM: Starting build script
8:57:24 PM: Using stage install dependencies
8:57:24 PM: Detected 1 framework(s)
8:57:24 PM: “vite” at version “4.2.1”
8:57:24 PM: Section completed: initializing
8:57:26 PM: ​
8:57:26 PM: Netlify Build
8:57:26 PM: ────────────────────────────────────────────────────────────────
8:57:26 PM: ​
8:57:26 PM: ❯ Version
8:57:26 PM: @netlify/build 29.8.0
8:57:26 PM: ​
8:57:26 PM: ❯ Flags
8:57:26 PM: baseRelDir: true
8:57:26 PM: buildId: 642307476e8e62000872994f
8:57:26 PM: deployId: 642307476e8e620008729951
8:57:26 PM: ​
8:57:26 PM: ❯ Current directory
8:57:26 PM: /opt/build/repo
8:57:26 PM: ​
8:57:26 PM: ❯ Config file
8:57:26 PM: No config file was defined: using default values.
8:57:26 PM: ​
8:57:26 PM: ❯ Context
8:57:26 PM: production
8:57:26 PM: ​
8:57:26 PM: 1. Build command from Netlify app
8:57:26 PM: ────────────────────────────────────────────────────────────────
8:57:26 PM: ​
8:57:26 PM: $ npm run build
8:57:26 PM: > blogapp-mui-ts@0.0.0 build
8:57:26 PM: > tsc && vite build
8:57:29 PM: vite v4.2.1 building for production…
8:57:29 PM: transforming…
8:57:40 PM: ✓ 11562 modules transformed.
8:57:40 PM: rendering chunks…
8:57:40 PM: computing gzip size…
8:57:40 PM: dist/index.html 0.46 kB
8:57:40 PM: dist/assets/index-d231bfdd.css 2.85 kB │ gzip: 0.95 kB
8:57:40 PM: dist/assets/index-ae03dfbd.js 374.39 kB │ gzip: 116.84 kB
8:57:40 PM: ✓ built in 11.06s
8:57:40 PM: ​
8:57:40 PM: (build.command completed in 14.5s)
8:57:40 PM: ​
8:57:40 PM: 2. Deploy site
8:57:40 PM: ────────────────────────────────────────────────────────────────
8:57:40 PM: Starting post processing
8:57:40 PM: ​
8:57:40 PM: Starting to deploy site from ‘dist’
8:57:40 PM: Calculating files to upload
8:57:40 PM: Post processing - HTML
8:57:40 PM: 2 new files to upload
8:57:40 PM: 0 new functions to upload
8:57:40 PM: Section completed: deploying
8:57:40 PM: Site deploy was successfully initiated
8:57:41 PM: Post processing - header rules
8:57:40 PM: ​
8:57:40 PM: (Deploy site completed in 222ms)
8:57:40 PM: ​
8:57:40 PM: Netlify Build Complete
8:57:41 PM: Post processing - redirect rules
8:57:40 PM: ────────────────────────────────────────────────────────────────
8:57:40 PM: ​
8:57:40 PM: (Netlify Build completed in 14.7s)
8:57:41 PM: Post processing done
8:57:41 PM: Caching artifacts
8:57:41 PM: Section completed: postprocessing
8:57:41 PM: Started saving node modules
8:57:41 PM: Finished saving node modules
8:57:41 PM: Started saving build plugins
8:57:41 PM: Finished saving build plugins
8:57:41 PM: Started saving corepack cache
8:57:41 PM: Finished saving corepack cache
8:57:41 PM: Started saving pip cache
8:57:41 PM: Finished saving pip cache
8:57:41 PM: Started saving emacs cask dependencies
8:57:41 PM: Finished saving emacs cask dependencies
8:57:41 PM: Started saving maven dependencies
8:57:41 PM: Finished saving maven dependencies
8:57:41 PM: Started saving boot dependencies
8:57:42 PM: Site is live :sparkles:
8:57:41 PM: Finished saving boot dependencies
8:57:41 PM: Started saving rust rustup cache
8:57:41 PM: Finished saving rust rustup cache
8:57:41 PM: Started saving go dependencies
8:57:41 PM: Finished saving go dependencies
8:57:41 PM: Build script success
8:57:41 PM: Section completed: building
8:57:43 PM: Uploading Cache of size 90.3MB
8:57:44 PM: Section completed: cleanup
8:57:44 PM: Finished processing build request in 37.843s

2

@Mageshkannan25499 I can’t see any reason why that would render, since there’s no built in “magic” handling for react.

When a request is made, Netlify responds with the file or function call, (factoring in any redirects/proxies that you have), that satisfies what was asked for.

If there is no applicable item, Netlify doesn’t have anything to respond with and that’s a 404.

If your react 404 logic is part of the Single Page Application (SPA), it will only happen when the SPA is loaded and running.

It could be that you need to put a redirect in place that causes all paths to load your SPA, e.g.

_redirects

/*  /index.html  200

Or you may want to look at the custom 404 page documentation:

3

I’m curious what have you tried?

4

Today I was busy I’ll try that tomorrow