前回、React Routerで作成したホームページがgithub pagesで表示されない現象が発生しました😨
elsammit-beginnerblg.hatenablog.com
。。。が解決しました！！👍
今回はReact Routerを用いたホームぺージをgithub pagesで表示する方法のついてまとめます！！
 | 新品価格 |
■発生現象
下記の通り、react-router-domを用いた場合、github pagesに限りホームページが表示されない(真っ白なページになったり404エラーになってしまう)、
現象が発生しました。
※yarn startとかだと普通に表示されるのですが、、、😢と困っておりました。
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
■解決方法
どうやらBrowserRouterに
basename={process.env.PUBLIC_URL}
をオプションとして付けておく必要があるようです。
ただ、これだけでは解決せず😨
なんでだろう？？泣
色々調べてみたところ、こちらのようにpackage.jsonのhomepageに
"http://[自分のGitHubのユーザー名].github.io/[公開したいアプリ、サイトのリポジトリ名"
を付与する必要がありました。
{
"name": "introduction",
"version": "0.1.0",
"homepage": "https://elsammit.github.io/MyIntroduction", ← homepageに公開したいサイト名を記入
"private": true,
・・・先ほどのbasename={process.env.PUBLIC_URL}と合わせて追加してbuild実施した後、
github pagesを確認！！
問題なく表示されました！！
BrowserRouterを用いたホームページはgithub pagesにてこちらに公開しました！！👍
https://elsammit.github.io/MyIntroduction/
■最後に
思ったより苦戦しました。。。
react-router-dom github pages
で調べてみたところ結構ヒットしましたので
思った以上に他の人も躓いているのだな！！
と思いました。
これから時間を見つけて更新していきたいな、と思います！！
