GitHub PagesにReact Routerで作ったものを公開したときの何も表示されない場合とURLの直接指定対応

はじめに

GitHub PagesにReact Routerで作ったものを公開しようとしたら、当然そうなるよねみたいなところで引っかかったメモ。

解決策

何も表示されない。

Routerにbasenameがついてなかった。
普通にやるとサブディレクトリつくのでつけないとだめだった。つけましょう。

example.tsx

  <Router basename={process.env.PUBLIC_URL}>

urlを直接指定すると404.html

ローカルで試してるときは適当なURLだと全部index.htmlにいってたのでよかったのですが、GitHub Pagesではそうならないので当然だめだった。

解決策

HashRouterを使う手もあるがしかし、今回はページ内リンクもあったので面倒で断念。
その場合、404のページを自分で用意して、パラメータを作ってindex.htmlに飛ばしてやるという力技ソリューションがあるらしい。

調べてみたら作ってくれてる人がいたので、ありがたく使わせて頂きました。

https://github.com/rafrex/spa-github-pages
MIT Licence

ありがたい。