株式会社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]
[js]
var historyApi = require(‘connect-history-api-fallback’);

// もろもろ省略

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

// もろもろ省略
[/js]

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


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

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

まとめ

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

React-Router Browsersync connect-history-api-fallback

以上です。

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

© 2014-2015 HUBFACTORY.INC

PAGE TOP