I'm having a little bit of trouble deploying a multipage React App (using React-Router V.6) on Github Pages. On my actual deployment build (here), whenever I go to a route (such as about or resume) and refresh, I get a 404. I assume this is due to Client-Side Rendering, along with GH Pages only knowing the base url "/portfolio", and not knowing "/portfolio/about".
I'm still learning the ropes of React-Router, so I've been searching for crazy for a solution, but have had no luck. I've searched through these solutions :
React Router v4: Cant load page on GitHub pages
https://github.com/rafgraph/spa-github-pages
and neither have seemed to work for me.
Boiling my question down to the simplest terms, I'm wondering what the easiest way to fix this is.
I've tried switching my BrowserRouter to HashRouter, but that didn't work. I attempted to add a 404.html file along with a redirect script in my Index.html, but that didn't work either. I'm not looking for anything too robust, since this is just a portfolio site hosted on GH Pages, but I do want to keep the url's looking clean if possible.
Again, here is my deployment build, along with source code
Apologies if this question is too long! This is my first StackOverflow question. : )
I believe that you are already going in the right direction
Reference to this repo, copy the last script from here and add the 404.html file, then it will be fine.