why does a link result show differently: the real page and 404?

[ipraisethelord]

Select Topic Area

Question

Body

I have struggled many days to deploy my vite react js app to github pages. Hope someone can help me to solve this problem. Please see the link: www.buildschooltogether.org

My donate button point to "/donate", at the top appbar, the Donate button will correctly redirect to donate page: https://www.buildschooltogether.org/donate, it display content correctly. But other donate buttons(you need to hover project image to show it) at project page , when you click it, it goes to https://www.buildschooltogether.org/donate, it shows 404 page

They are the exactly same path, why do they have different result? How to solve it? I have tested them on my local, they works fine. Thank you for your help.

[ipraisethelord]

I already have place a 404.html page and add javascript code to the root folder according to this https://github.com/rafgraph/spa-github-pages . I also have my homepage in package.json. My deploy branch is github pages, I have CNAME file in the root. I felt I have tried all ways except using Hashbrowser instead of BrowserRouter. I might try it, but I don't really like to show a '#'. My repo is https://github.com/ipraisethelord/build-school-together/ if anyone can help to fin the solution. Thank you!

[ipraisethelord]

It resolved because of github pages doesn't handle SPA. Once I place a 404.html serves redirect function. This is not happened any more. Solution see this post: https://github.com/orgs/community/discussions/55673