Why does my GitHub page only show the homepage for my react app and not the other pages?

Question

So Im trying to deploy my weather app to GitHub Pages and I have installed gh pages as well as added the web link to homepages in my package.json file. But when I go on the live site, it only shows the homepage and not the other "subpages" I have. If I click on the cities on top to get to that page, it shows a 404 error. What should I do??

This is the link I have in package.json: "homepage": "https://mw3981.github.io/Weather_App/"

Answer 1

My initial thought is that you have a disconnect between what the router is expecting and how Github pages serves pages from within a repo.

Github always wants to have "/Weather_App/" at the start of the path. (so the homepage is "https://mw3981.github.io/Weather_App/")

The router in react isn't expecting this, so when it tries to serve a subpage it's trying to go to "https://mw3981.github.io/subpage" instead of what github is expecting: "https://mw3981.github.io/Weather_App/subpage"

Try adding/using basename the prop mentioned here .

Also, there may be some compatibility issues between Github Pages and how the router is doing page changes via pushState . That's discussed here .