title: 404 Error on refresh with SPA React Router app in GitHub Pages
body: <p>I built my website with React and React Router and it is hosted on Github Pages. When I refresh the site on a page that is not my home page OR do ctrl+click to open the page in a new tab, it leads to a 404 error. I know this is because Github pages doesn't have access to front-end routes and one solution is to add a 404.html file that redirects back to your index.html.</p>
  <p>I tried following the instructions on both</p>
  <ol>
  <li><a href="https://github.com/websemantics/gh-pages-spa" rel="noreferrer">https://github.com/websemantics/gh-pages-spa</a></li>
  <li><a href="https://github.com/rafgraph/spa-github-pages" rel="noreferrer">https://github.com/rafgraph/spa-github-pages</a></li>
  </ol>
  <p>but neither worked for me. I think I am missing something but I can't figure out what is going wrong as I'm not that familiar with React Router. Can anyone help? (Note: I know a solution is to use HashRouter but I don't want my URLs to look ugly)</p>
  <p>My code can be viewed on GitHub: <a href="https://github.com/christinexlin/portfolio" rel="noreferrer">https://github.com/christinexlin/portfolio</a></p>