React Routerでパスに直接アクセスすると404エラーがでたときの対応

概要

React Routerでパスに直接アクセスすると404エラーが発生しました。

考えたこと

サーバーサイドで、毎回Router.runを走らせる必要がある説。

• javascript - React-router urls don't work when refreshing or writting manually - Stack Overflow

問題

• Node.jsじゃないとだめ
• Angular.jsではできていたのに何故できないのか

解決策

Router.run(Routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, content);
});

を

Router.run(Routes, Router.HashLocation, function (Handler) {
  React.render(<Handler/>, content);
});

にして解決。

React Router Documentationには以下のようにある。

This is the default location used in Router.run because it will always work, though we recommend you configure your server and use HistoryLocation.

HistoryLocationはサーバーの設定が必要だそうです。