My page comes out 404 with routing

[cofla159]

My deployed page shows the main page well : https://mungtage.github.io/frontend/

but if routes into nested address like https://mungtage.github.io/frontend/results or https://mungtage.github.io/frontend/auth , it just throws out 404 error.

Those nested pages are able to access with buttons(I connected <Link> component for buttons) but not with typing url to the address bar directly.

This is problem because I need to attach google login into my service, but the redirected page from google login page turns out 404: https://mungtage.github.io/frontend/auth?state=7rDIGTpshm6-oFYGiwzrbeVEJyj488QwXKRLTrAB-78%3D&code=4%2F0ARtbsJoRbsCCmyyWrbsN1VW3_hSoU1MIFEBQIk7aUt3zHgzqsR12tksWUsbZjn1JnA5NBg&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&authuser=0&prompt=none
Some processes that get code and request for token occurs in that page.

How can I do?

[spenserblack]

Those nested pages are able to access with buttons(I connected <Link> component for buttons) but not with typing url to the address bar directly.

GitHub pages isn't fully set up to be a single-page app where all URLs use the same index.html.

A way around this is to use hash routing. Instead of a route like foo.github.io/repo/subpage, it is foo.github.io/repo#/subpage. This works because the actual page is still just /repo, so GitHub loads the correct page, but the hash router will recognize #/subpage and render the correct visuals.

Here's some reading:

• React's <HashRouter>
• Vue's hash history mode

If you don't want to use a hash router, I believe you can't use GitHub pages, and will need to use another service like Vercel, which will know how to handle the routes for a single-page app.

(I use Vue, not React, but the same concepts should apply)

[yoannchaudet]

You can also if you like define a 404.html page in your repo and copy your router there as well. It's not the best but a workaround which will work. All 404 errors will be sent there (where you can route them).

[cofla159]

You can also if you like define a 404.html page in your repo and copy your router there as well. It's not the best but a workaround which will work. All 404 errors will be sent there (where you can route them).

Thanks for another solution. By the way, I got fixed with @spenserblack 's answer, so I'll try it next time.

[ossanna16]

Hi there @cofla159 and welcome to our community 😄. Thanks so much for asking a great question!