React Router †
- Reactのためのルーティングライブラリ
- History APIとの連携や、ルーティングに応じたコンポーネントの描画を任せることができる
- React Router ではルーティングをコンポーネントによって定義する
- コンポーネントをネストすることで、ネストしたルーティングの定義も行える
- 子のルーティングは props.children に渡される。これにより、階層を持ったURLに対するルーティングが実現できる。
- ページ遷移には、React Router が提供する Link や、browserHistory オブジェクトが持つ push メソッドを使用する
- React Router は、ルーティングの状態に応じた処理が定義できるライフサイクルメソッドを持っている
- getComponent ... ルーティングに応じて必要なコンポーネントを非同期で読み込みたいときに使用
- onEnter ... 認可処理などの前処理をしてからコンポーネントを表示したい場合などに使用
- onChange
- onLeave
- React Router はミドルウェアとしての仕組みも持っている
React Router ver.4 †
- Ver.4 で仕様が結構変わっている！！
- 以前はreact-routerからimportする仕様だったが、v4はwebとnativeが分かれるようになった
- webの場合は react-router-dom
- nativeの場合は react-router-native
- URL起因のパラメータ周りの呼び方変更 this.props.params -> this.props.match.params
- Route定義がしれっと無名関数になってる
- browserHistoryの取り扱い
- ver.3
import { Router, Route, IndexRoute, IndexLink, browserHistory } from 'react-router';
:
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Top} />
<Route path='hoge' component={Hoge} />
</Route>
</Router>
- ver.4
import { Route, BrowserRouter } from 'react-router-dom';
:
<BrowserRouter>
<div>
<Route exact={true} path='/' component={Top}/>
<Route path='hoge' component={Hoge}/>
</div>
</BrowserRouter>
- IndexRedirect?がなくなり、相対パスでなく絶対パス？
- ver.3
<Route path="/one">
<IndexRedirect to="1" />
<Route path="1" component={First} />
<Route path="2" component={Second} />
</Route>
- ver.4
<Route path="/one">
<Switch>
<Route exact path="/one/1" component={First} />
<Route exact path="/one/2" component={Second} />
<Redirect to="/one/1" /> <== パスがマッチしなかった場合は最後に書くこと！
</Switch>
</Route>
- 破壊的な変更もあるので、v3で作ったものを無理やり乗せかえるのはやめとけ！
- マニュアル ... これをしっかり読んで対応すべし！
|
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
