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');
}
サンプル
こちらにあります。