Reactでgh-pagesにデプロイしたとき、直接URLを踏むと404が返る問題への対応

AppStoreなどに登録するプライバシーポリシーのページが欲しくて、Gh-pagesにポートフォリオを作ったのだが、肝心のプライバシーポリシーのURLに直接リンクを貼ると404になってしまい困っていた。その解決方法の日本語の情報がなかったのでここにメモをしておく。

環境

  "dependencies": {
    "@material-ui/core": "^3.1.1",
    "@material-ui/icons": "^3.0.1",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5"
  },
  "devDependencies": {
    "gh-pages": "^2.0.0"
  }

create-react-app で作り、gh-pages でデプロイをしている。ルーティングは下記のように、react-router-domで書いていた。

App.js

render() {
    const { isJapanese } = this.state
    return (
      <React.Fragment>
        <CssBaseline />
          <Router>
            <MuiThemeProvider theme={theme}>
              <MenuBar switchLang={this.switchLang} />
              <Switch>
                <Route
                  path='/'
                  exact
                  render={() => <Portfolio isJapanese={isJapanese} />}
                />
                <Route
                  path='/praivacy_policy'
                  render={() => <PrivacyPolicy isJapanese={isJapanese} />}
                />
                <Route component={NoMatch} />

              </Switch>
            </MuiThemeProvider>
         </Router>
      </React.Fragment>
    );
  }

発生していた課題

• => トップページ => プライバシーポリシー ... OK
• => プライバシーポリシー ... 404

このように直接プライバシーポリシーのリンクを踏むと404が返ってしまう。

解決方法

getting 404 for links with create-react-app deployed to github pages

stackoverflowに書いてあった。簡単に解説をすると、

• 直接新しいURLのリクエストを Github pages に送っても、その時点ではreact-routerが動いてくれず、ローディングが完了していないので、404が返る
• Github pages では、サーバーのコントロールを持っていないので、対策を考えないとね。
• browserHistoryからhashHistoryに切り替えるか、すべてのリクエストでindex.htmlにredirectするか、やると良いよ。

ということだった。僕はURLの変更はしたくなかったので、index.htmlにredirectする方にした。ありがたいことに回答者がScriptも用意してくれていて、それ通りにすることで解決できた。
rafrex/spa-github-pages