2016年05月30日

react-routerの使い方

react-routerの使い方メモ。お約束のnpmでインストールして

npm install --save react-router


importで必要なモジュールを読み込む。

import { Router, Route, Link, browserHistory,IndexRoute ,IndexLink,Redirect} from 'react-router'


簡単な使い方はいかのような感じ。以下の場合はAppコンポーネントでルーティングを設定してリンクでHomeページとAddressページを行き来できるようにしている。

import React,{ Component }  from 'react';
import { render } from 'react-dom';
import { Router,Route,Link,browserHistory } from 'react-router'

class App extends Component {
render() {
return (
<Router history={browserHistory}>
<Route path='/' component={Container}>
<Route path='/index' component={Home} />
<Route path='/address' component={Address} />
</Route>
</Router>
)
}
}

class Container extends Component {
render() {
return (
<div>
{this.props.children}
<Nav />
</div>
)
}
}

const Home = () => <h1>Home</h1>
const Address = () => <h1>Address</h1>

const Nav = () => (
<ul>
<li><Link to="/index">index</Link></li>
<li><Link to="/address">address1</Link></li>
</ul>
);

render( <App />, document.getElementById('app'));


複雑にすると以下の様な感じになる。ハマったのは子コンポーネントにpropsを継承する方法だったけどReact.cloneElemenを使えば上手く行った。

import React, { Component }  from 'react';
import {render} from 'react-dom';
import { Router, Route, Link, browserHistory,IndexRoute ,IndexLink,Redirect} from 'react-router'

class App extends Component {
render() {
return (
<Router history={browserHistory}>
<Route path='/' component={Container} handler>
<IndexRoute component={Home} />
<Route path='/index' component={Home} />
<Route path='/address' component={Address} />
<Route path='/address:userId' component={Address} />
</Route>
</Router>
)
}
}
const Nav = () => (
<ul>
<li><IndexLink to="/" activeClassName="active" onlyActiveOnIndex={true}>index</IndexLink></li>
<li><Link to="/address" activeClassName="active">address</Link></li>
<li><Link to="/address1" activeClassName="active">address1</Link></li>
<li><Link to="/address2" activeClassName="active">address2</Link></li>
</ul>
);
class Container extends Component {
constructor(props) {
super(props);
this.state = {num: 0};
}
addNum(){
this.setState({num: this.state.num+1});
}
render() {
return (
<div>
{this.props.children && React.cloneElement(this.props.children, {
onAddNum: this.addNum.bind(this),
num:this.state.num
})}
<Nav />
</div>
)
}
}

class Home extends Component {
render() {
return (
<div>
<h1>Home</h1>
<p>{this.props.num}</p>
<button onClick={this.props.onAddNum}>click</button>
<p>userId:{this.props.params.userId} / name:{this.props.params.name}</p>
</div>
)
}
}

class Address extends Component {
render() {
return (
<div>
<h1>Address</h1>
<p>{this.props.num}</p>
<button onClick={this.props.onAddNum}>click</button>
<p>userId:{this.props.params.userId} / name:{this.props.params.name}</p>
</div>
)
}
}
render( <App />, document.getElementById('app'));


posted by ねこまんま at 00:34 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック