現象

![160702 1](//images.ctfassets.net/12z221isyzu3/3PJpvhp55DYk5LSRRPf1p0/b552080dee71623bee5dce242e949d99/160702_1.gif)

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()]

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

```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の自動リロード機能の不具合」って載ってるんですが、これにしないと動かなかったです。

まとめ

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

![160702 2](//images.ctfassets.net/12z221isyzu3/4hdLtRszcbUKDEDTYFrHoP/e78e96757f80278dcf8fb026727ae617/160702_2.gif)

以上です。

TAG: React

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

React + Flux の概念について個人的にまとめました。