react-routerでページ遷移する際の小技

どうもヒロです！
梅雨入りしましたねヾ(･ε･`*)
今年も、もうそんな季節かと考えると1年あっという間ですよね汗

時が経つのも早いので、今回も忘れないうちにreact-routerでページ遷移する際に詰まった事をメモ代わりに残しておきたいと思います。

今回のサンプルはこちらにございます。
https://github.com/takahiro-saeki/react-router-browserHistory-sample
サンプル用意する程のことでもないですが汗

browserHistoryで404エラーを回避する方法

react-routerでbrowserHistoryを使用してページ遷移をする時、何も設定しないと404エラーが出ます。
ただおそらく多くのフロントの方はgulpなりwebpackなりでビルド環境を構築し、ローカルサーバーを導入している(browser-syncやwebpack-dev-server等)と思うので、gulpの場合ですとconnect-history-api-fallbackを導入したり、webpackだとwebpack-dev-serverのhistoryApiFallbackをtrueにしてあげればローカルサーバーで見る分には404エラーを起こすことは無くなります。

ただ、もし上記のようなことをしなかったり、S3等の静的ホスティングサービスでreact-routerを使用した際に(そもそもそのような状況でreact-routerを使用するなという話しは除いて)<Link to='your path'>のような記述では仕様を満たせず、location.assignと同等のことを使用したくなった場合に、404エラーを起こさない方法はないかと色々探した結果、見つかりました。

browserHistory.push(your path);と記述することによって404エラーを起こすことなく遷移することが出来ます。

簡単にまとめると以下のような感じ

import React, {Component} from 'react';
import { browserHistory } from 'react-router';
import Header from '../component/header';

export default class sample extends Component {
  location() {
    browserHistory.push('/sample');
  }

  render() {
    return (
      <main>
        <div onClick={this.location}>サンプル</div>
      </main>
    )
  }
}

browserHistoryをimportしてbrowserHistory.push()してあげればOK！

ただし、リロードした時には404エラーになるので、S3や静的ホスティングサービスでリロードに対する404エラーを回避する場合はインフラ側で設定しないといけないですがヽ(´･д･`)ﾉ

というわけで手短ですが以上です。