why doesn't my 404.html redirect to index.html?

[ipraisethelord]

Select Topic Area

Question

Body

I just deployed my vite react js SPA code to github pages. It is a simple applications with only static pages. I got 404 page not found issue on nested pages. I found a possible solution from
It seems I just need to copy its 404.html page to my root folder, add javascript code to my index.html, and create CNAME at root (function(l) { if (l.search[1] === '/' ) { var decoded = l.search.slice(1).split('&').map(function(s) { return s.replace(/~and~/g, '&') }).join('?'); window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash ); } }(window.location))
I did accordingly, but I still get 404 page, Either the 404.html does redirect to index.html or github pages does know that I have a 404.html page. Please help me fix the problem.
I am new to this and are learning. Your help will be greatly appreciated!

[ipraisethelord]

Someone suggested to place index.html content to 404.html. 404.html page serves as index.html when 404.html is displaced and will redirect to the path from route. In my case I only have one simple link "/donate". However, this doesn't work either. It still display github pages' `404
File not found
The site configured at this address does not contain the requested file.
If this is your site, make sure that the filename case matches the URL.
For root URLs (like http://example.com/) you must provide an index.html file.

Read the full documentation for more information about using GitHub Pages.` , how to make github pages display my own 404.html? Is there a configuration for that? Thank you in advance!

[ipraisethelord]

finally solved the problem from stackoverflow . For vite react application, place the 404.html page at public folder, then add configuration to the vite.configure.js so that the 404.html will be place in dist folder after build. Saving you click the stackoverflow link, here is code:
404.html
`

<title>Page Not Found</title> <script> sessionStorage.redirect = location.href; </script> `, place this code to index.html at header section ` <script> (() => { const redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect !== location.href) { history.replaceState(null, null, redirect); } })(); </script>`, then at vite.configure.js, add this `export default defineConfig({ plugins: [react()], build: { rollupOptions: { input: { main: resolve(__dirname, "index.html"), 404: resolve(__dirname, "public/404.html"), }, }, }, });` Thanks to https://stackoverflow.com/users/18060222/yehuda