Github Pages で BrowserRouter が正常に処理されない

個人で、Reactアプリを作成し、Github Pagesで公開したのですが、BrowserRouterを使用した複数ページの表示がうまく動作しない問題にハマったので、解決方法を記載します。

因みに、学習結果としてのソースコード、公開しているページのリンクは以下なので、興味があれば閲覧ください！

ソースコード

公開ページ

環境

• windows11
• react-router-dom バージョン: 6.21.1
  　※バージョン5.x.xを使用した際、実装方法が異なります。
• gh-pages バージョン: 6.1.1
  　※package.jsonに手を加えて、npm run deployの実行で、gh-pagesブランチに変更内容が直接プッシュされるような状態になっています。

原因

先に原因を記載しておくと、Github Pagesでreact-router-domを使用したページ遷移を行った際、正しく遷移・処理が行えず、404.htmlへ遷移してしまうというのが原因でした。
解決方法として、404.htmlの読み込み時にindex.htmlと同じ内容を読み込ませることで解決できました。
具体的な方法は、以下に記載します。

package.jsonの修正

scriptsのbuildの記載を、以下の様に修正します。
修正により、build時にindex.htmlを404.htmlへコピーする処理が走ります。
※ cp コマンドでコピーを行っているため、git bashが使えることが前提となります。

package.json

{
  "scripts": {
    "build": "react-scripts build && cp build/index.html build/404.html",

.... // 以下は、deploy 時に、gh-pagesブランチへプッシュするための設定
    "deploy": "gh-pages -d build",

その他

そもそも、初期ページが表示できないという場合は、BrowserRouterにbasename={process.env.PUBLIC_URL}を記載するか、各ページのパスに対して、自身のリポジトリ名を追加する様な修正が必要です。

App.tsx

const App = () => {
  // 各ページのパス設定
  return <BrowserRouter basename={process.env.PUBLIC_URL}>
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/author' element={<Author />} />
      <Route path='/report' element={<Reports />} />
    </Routes>
  </BrowserRouter>;
};

各ページのパスを修正するなら、以下
※ 私が作ったサンプルだと、sample_react_tsがリポジトリ名となります。

App.tsx

const APP_NAME: String = "sample_react_ts"; // これが、リポジトリ名

const App = () => {
  // 各ページのパス設定
  return <BrowserRouter>
    <Routes>
      <Route path={APP_NAME + '/'} element={<Home />} />
      <Route path={APP_NAME + '/author'} element={<Author />} />
      <Route path={APP_NAME + '/report'} element={<Reports />} />
    </Routes>
  </BrowserRouter>;
};