GitHub Pagesでreact-router-dom@v6を使って悩んだ話！

こんにちは、MSKです。
ここ数日でReactとreact-router-domを使ったホームページを作っていて、それをGitHub Pagesで公開しました。
ところが、ローカルで動いていたアプリはデプロイすると真っ白なページしか表示されなくなりました。
この問題を解決したので備忘録として残します。

Contents

開発環境
react-router-dom@v6での実装
問題
原因と解決策
最後に

開発環境

今回の開発では主に以下を使いました。

React@v18
typescript
react-router-dom@v6
gh-pages@v4

react-router-dom@v6での実装

以下のブログではv5を使っていましたが、今回はv6を使います。
少し実装方法が変わったので、書いておきます。

https://www.mochinoki-labo.com/react-router-page-transition/

↑の記事と同じようにページを作っておきます。
例えば、

import React from 'react'
const Home= () => {
    return (
        <div>
            Home
        </div>
    )
}
export default Home;

のような感じです。

次に後で作るリンクと上で作ったコンポーネントを結びつけるコンポーネントを作ります。

import React from 'react';
import {BrowserRouter, Routes,Route} from 'react-router-dom';
/** ここに各ページをimport */

const RouteManager:React.FC = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route  path='/'  element={<Home />} />
                <Route  path='/about' element={<About/>}/>
                <Route  path='/works' element={<Works/>}/>
                <Route  path='/contact' element={<Contact />}/>
                <Route  path='*' element={<NotFound />}/>
            </Routes>
        </BrowserRouter>
    )
}

export default RouteManager;

ここがv5と違っていて、v5ではcomponentというプロパティにコンポーネント名を入れていましたが、v6ではelementにJSXとしての要素として設定します。

最後にリンクを作って、各ページを遷移できるようにします。

<nav>
    <Link to="/">
        <a>ホーム</a>
    </Link>
    <Link to="/about">
        <a>紹介</a>
    </Link>
    <Link to="/works">
        <a>作品集</a>
    </Link>
    <Link to="/contact">
        <a>お問い合わせ</a>
    </Link>
</nav>

これでローカルで実行してみると、上手く遷移できることが確認できました。

問題

GitHub Pagesにデプロイする準備をします。
gh-pagesをインストールして、次のようにpackage.jsonを編集します。

{
  "name": "my_app",
  "homepage": "https://<githubのユーザー名>.github.io/<このプロジェクトのgithubでのリポジトリ名>",
  "version": "0.1.0",
・・・・
"scripts": {
    "predeploy": "npm run build", 
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
・・・

homepageというフィールドを追加して、<>で囲まれた箇所に適切な名前を入力します。
scriptsフィールドにpredeployとdeployというフィールドを追記します。
これで準備OKなので、次のコマンドでgithubにデプロイします。

npm run deploy

publishedと出たら、GitHubの該当するリポジトリに移動して、Settingsからpagesを選択します。
sourceを設定します。
僕の場合はgh-pagesでデプロイした際に作成されるgh-pagesブランチを選択して、/rootフォルダを指定しました。
Actionsからデプロイが完了したことを確認して、URLを開いてみると真っ白なページしか表示されていませんでした。

原因と解決策

原因は上の設定ではルートがhttps://<GitHubのユーザー名>.github.io/とみなされるので、react-router-domで設定したpath=’/’はhttps://<GitHubのユーザー名>.github.io/とみなされているので、真っ白なページが表示されているということでした。

GitHub Pagesにデプロイする時にreact-router-domで設定しているpathとLinkを次のように設定するとちゃんと表示されました。

import React from 'react';
import {BrowserRouter, Routes,Route} from 'react-router-dom';
/** ここに各ページをimport */

const RouteManager:React.FC = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route  path='/<このプロジェクトのgithubでのリポジトリ名>/'  element={<Home />} />
                <Route  path='/<このプロジェクトのgithubでのリポジトリ名>/about' element={<About/>}/>
                <Route  path='/<このプロジェクトのgithubでのリポジトリ名>/works' element={<Works/>}/>
                <Route  path='/<このプロジェクトのgithubでのリポジトリ名>/contact' element={<Contact />}/>
                <Route  path='*' element={<NotFound />}/>
            </Routes>
        </BrowserRouter>
    )
}

export default RouteManager;

<nav>
    <Link to="/<このプロジェクトのgithubでのリポジトリ名>/">
        <a>ホーム</a>
    </Link>
    <Link to="/<このプロジェクトのgithubでのリポジトリ名>/about">
        <a>紹介</a>
    </Link>
    <Link to="/<このプロジェクトのgithubでのリポジトリ名>/works">
        <a>作品集</a>
    </Link>
    <Link to="/<このプロジェクトのgithubでのリポジトリ名>/contact">
        <a>お問い合わせ</a>
    </Link>
</nav>

この修正を行ってデプロイするとGitHub Pagesで作成したアプリが表示されました。