React.js
Pocket

react-routerを使って、下層ページに直接アクセスすると、cannnot Getとか本番環境では404になったりするのにハマりがちなのでメモ

webpackの場合

webpack-dev-serverの設定でhistoryApiFallbackを書けばOKです。

// 省略
  devServer: {
    historyApiFallback: true, // ここ追加
    hot: true,
    contentBase: path.join(__dirname, 'public'),
    port: 7000,
    inline: true
  },
// 省略

本番環境

.htaccessでリダイレクトさせました。

.htaccess

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

example.com/aboutにアクセスしても、このページは存在してないので、まずはindex.htmlにアクセスして、routerでaboutページへ遷移という感じです(たぶん)。

参考サイト

react-routerでURLパラメータを指定した際、URL直打ちだと404になります

teratail

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

Qiita @diescake

react-routerを使って静的コンテンツを配信する際のrewrite設定覚書

Qiita @Jey
Pocket

カテゴリー: タグ: