react-router-redux で URL 直打ちすると Cannot GET /subdir になる

Last updated at 2016-08-16Posted at 2016-03-09

Redux で routing を実装していて、うまく動いてくれずハマりました。
所感の項にも書いていますが、見当違いで解決策が見つかりづらかったので情報残しておきます。

現象

ブラウザで、ルート以下の階層の URL を直打ち、あるいはリロードすると Cannot GET /subdir (subdir はディレクトリ名) と表示されページを読み込めず。

直打ちで読み込めるのは、この場合 http://localhost:3000 のみ。

サーバに 404 を index.html に fallback する設定が必要。

サーバによって設定方法は違いますが、
webpack-dev-server の場合は起動オプションで --history-api-fallback を追加すればよいです。

$ webpack-dev-server --history-api-fallback

この問題が発生するのは、history として browser-history を利用している場合のみ。
hash-history を利用している場合はこの問題は発生しません。(ハッシュの場合は 404 にならないので当然といえば当然ですが…)

なので、googleability を重視してタイトルは react-router-redux としましたが、
実際には react-router 単体に起因する問題です。

以前 react-router を利用した経験があったために、
完全に react-router-redux の使い方が間違っているものと思い込んで調査していたため、なかなかこの答えにたどり着けませんでした。

最終的には自分のソースコードと github の react-router-redux の example/basic を、目diff してて気づきました。そうだサーバ違うじゃんと…。

開発ベースは Yeoman で generate したり Github で有志が公開されている starter kit 的なものを使ったりすると、
開発用のサーバも何かしら用意されているため、ほとんど意識することはないですが、
もう少し気にかけてあげないとなーと思う今日のわんこなのでした。