Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@takuya0206

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

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?