1

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. : )

mpc1448
  • 13
  • 4

1 Answers1

2

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.

Ryan Le
  • 7,708
  • 1
  • 13
  • 23
  • tried and retried the tutorial 6 times before you left this comment, but on the 7th, it worked. thank you so much, i would've given up on this solution if it wasn't for you !! – mpc1448 Feb 28 '22 at 08:32
  • Glad to hear that! I just tried to point out where you were likely to miss. – Ryan Le Feb 28 '22 at 09:12