株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

React-Router で browserHistory を使っているときに、Top以外のページをリロードすると404エラーになる時の対応方法

2016.7.2

CATEGORY - web

現象

React-Router 404エラー

React-Router で browserHistory を使ってて、こんな感じで、TOPページから、リンクをたどっていく時には問題ないのですが、下層ページでリロードしたり、下層ページのURLを直打ちしたりすると404エラーになります。。

URLに’#’を含めたくなかったので、今回は、browserHistory を使ってるんですが、こいつの代わりに hashHistory を使えば、404エラーにはならないです。(※URLに’#’がついちゃいますが。)

原因

当たり前と言えば当たり前なんですが、SPAなので、index.html からたどっていく分にはいいのですが、下層ページを直打ちした際に、要は、about.html とか detail.html のファイルがないって怒られるんですね。。。

対処方法

今回は、ローカルのWEBサーバー構築に、Browsersync を使用しているので、その場合の対応です。

web-pack とか使ってる場合は、↓ここらへんに書いてあるんですが、webpack-dev-server の historyApiFallback を true にすればいけるみたいですね。

react-routerでページ遷移する際の小技

Browsersyncの場合

connect-history-api-fallback を使えばいけます。↓こんな感じで、起動の際に、

middleware: [historyApi()]

を加えてあげればいいみたいです。

[gulpfile.js]

    var historyApi  = require('connect-history-api-fallback');
    
    // もろもろ省略

    gulp.task('browser-sync', function() {
      browserSync({
        port: 4000,
        server: {
          baseDir: 'tmp',
          middleware: [historyApi()]
        },
        startPath:'/'
      });
    });

    // もろもろ省略
  

設定方法の詳細などは、↓ここらへんの記事にまとまってます。

BrowsersyncでWEBサーバー環境を整える

ちなみに、記事の下の方に、「Browsersyncの自動リロード機能の不具合」って載ってるんですが、これにしないと動かなかったです。

まとめ

とゆーわけで、無事、ちゃんと表示されるようになりました。
最近のフロントはいろいろやることが多くてしんどいです笑

React-Router Browsersync connect-history-api-fallback

以上です。

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP