React app hosted as Github Project Page. How to display custom 404 page?

[trumanjchan]

Hello, I have a react github project page (example.github.io/website/) with react-router-dom v6 and I've been trying to make it so when a user navigates to an endpoint that doesn't exist, or refreshes on a subpage that isn't the root page, then it displays a 404 page I created (PageNotFound.js).

So far I have tried two methods that work in localhost, but when I 'npm run deploy' to github pages, it doesn't work. The methods I've tried so far is putting <Route path='*' element={<PageNotFound/>} /> as the first endpoint and even as the last endpoint, and trying <Route path='*' element={<Navigate replace to='/404'/>} />.

My endpoints in the App.js file are inside Routes which is inside Router.

Thanks for the help.

[trumanjchan]

I solved this problem by first doing the Basic Instructions in this guide to fix my endpoints giving the default github 404 page upon refreshing of pages that weren't the root page: https://github.com/rafgraph/spa-github-pages#usage-instructions . I placed the <script></script> inside my 404.html file and put it inside the public folder. Then I added the redirect script into the head of the index.html file.

To display my custom 404 page (PageNotFound.js) I imported Navigate from react-router-dom, and inputted these two routes to App.js:

<Route path='/404' element={<PageNotFound/>} />
<Route path='*' element={<Navigate replace to='/404'/>} />

[ErikPlachta]

Thank you for this.

[prashanth00]

Thank you very much. This solved my problem😍

[AleksandraBakhcheva]

Thank you!!!