Cant navigate to individual router pages of react application

Question

I have a react app that is held on gh-pages. This page has a '/Main' as its home route and a '/le' route which has been linked in the Main. This link, which is styled in the form of a button, works perfectly.
The problem arises when I try to go to the gh-page URL profile.github.io/le(this is the url where the router link takes me to when I click the button) , it takes me to a dead GitHub page. Why am i able to navigate there using router link but not access it directly by the URL.

Answer 1

Navigating within a single page application uses a trick: it replaces the content and modifies the URL (there is an API for that) without causing a full page reload, the server doesn't even notice those kind of navigation. That modified URL's path could be anything, it does not have to correspond to real files.

When trying to directly open such a routed URL though, you are asking the github server to deliver content for that location and it tries to find a file at the given path. When there is no such file, a 404 page is shown instead. The server does not know you actually want to open the entry file and let its internal (react) routing do the actual navigation work.

There is a helper which replaces the 404 page and augments the entry page to get the desired behavior: https://github.com/rafgraph/spa-github-pages