React Routerを使用して作ったページをGitHub Pagesにデプロイしようとしたらうまくいかなかった話(解決法まで)

まず何をしようとしてたのか

create-react-appを使用してreactのアプリケーションの枠組みを作ってそれを基にポートフォリオサイトを作り，GitHub Pagesへ上げようとしていた。

何が起きたのか

GitHub PagesにReactアプリをデプロイする方法やreact-gh-pagesのリポジトリを見ながらデプロイしようとしてたらページが表示されなかった。

試したこと

• gh-pagesのバージョンを落としたり
• homepageのリンクをhttps://ry-itto.github.io/リポジトリ名 にしてみたり
• 新しくcreate-react-appを使用して何も変更していない状態でちゃんとデプロイできるか試したり

しました。

何をしたらうまくいったのか(解決法)

BrowserRouterにbasename={process.env.PUBLIC_URL}をつけてあげるとうまくいった。

<BrowserRouter basename={process.env.PUBLIC_URL}>
  <Switch>
    ...
  </Switch>
</BrowserRouter>

終わりに

今回はReactの練習がてらポートフォリオサイトを作成してGitHub Pagesに上げようと思ってこの問題に直面しました。
それゆえになぜ上記のような解決方法で解決したのかを理解できていないので今後理解していこうと思います。

今回作成したポートフォリオサイト

https://ry-itto.github.io/portfolio_react
※挙動がおかしい部分などありますが暖かい目で見ていただけるとありがたいです。。

参考

• GitHub PagesにReactアプリをデプロイする方法
• react-gh-pagesのリポジトリ
• React-router problem with gh-pages - Medium