react-routerでrouteに入った時のイベントを取る

react-routerでは、何かしらのrouteに入った時のフックポイントが用意されている。

以下のように onEnter を使う。

const { Router, Route } = require('react-router');
const { App, Home } = require('./components');

// Homeに入った時の処理
function enterHome() {
   console.log('enter home');
}

ReactDOM.render(
  <Provider>
    <div>
      <Router>
        <Route path="/" component={App}>
          <Route component={Home} onEnter={enterHome}/> // onEnterをここに書く
        </Route>
      </Router>
    </div>
  </Provider>,
  document.getElementById('root')
);

react-router本家では以下の様に説明されていた。

onEnter(nextState, replace, callback?)

routeに入った時に呼ばれる。次のrouterの状態と、別のパスにリダイレクトするための関数が与えられる。 this はフックをトリガーしたrouteのインスタンスになる。

もし callback が第三引数として与えられたら、このフックは非同期に実行され、 callback が呼ばれるまでそのrouteへの遷移はブロックされる。

その他

nextState も replace も特に使う必要の無い場合は↑に書いたようにすれば良いと思う。以下の記事のように認証系に使うこともあるようだ。ログイン必須のrouteへの遷移の時に強制ログインをさせる、みたいな感じに。

www.terlici.com