react-routerでページ遷移する方法

August 27, 2016

ざっくり3つに分けられるので簡単にまとめました。

react-routerって何?って人はまずはreact-routerでググって見れば良いと思います。

Link

いわゆる<a/>相当のコンポーネントです。

https://github.com/reactjs/react-router/blob/master/docs/API.md#link

import { Link } from 'react-router';

class SomeComponent extends React.Component {
  render() {
    return (
      <div>
        ...
        <ul>
          <li><Link to="/aboutus">About us</Link></li>
          ...
        </ul>
      </div>
    );
  }
}

router

routerオブジェクトのメソッドを使い、画面遷移をimperativeに実行します。

https://github.com/reactjs/react-router/blob/master/docs/API.md#withroutercomponent-options

routerオブジェクトを利用したいコンポーネントをwithRouterメソッドでラップします。 ラップすることで、routerオブジェクトがpropsにインジェクトされます。 コンポーネントのイベントハンドラ内で特定のページに遷移させたいときなどに使います。

import { withRouter } from 'react-router';

class SomeComponent extends React.Component {
  onClick() {
    this.props.router.push('/home');
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick.bind(this)}>Go</button>
      </div>
    );
  }
}

export default withRouter(SomeComponent);

router (outside component)

routerオブジェクトをコンポーネントの外で使う方法です。

https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

reduxのaction, middlewareなど、コンポーネント外の処理でページを遷移させたいに使います。

import { Router, Route, browserHistory } from 'react-router';

class App extends React.Component {
  render() {
    return (
      <Router history={browserhistory}>
        <Route .../>
        <Route .../>
      </Router>
    );
  }
}
import { browserhistory } from 'react-router';

function someAction() {
  browserhistory.push('/result');
}

サンプル

こちらにあります。

https://github.com/hokuma/page-transition-in-react-router

comments powered by Disqus