Redux と共に redux-simple-router を使おうと思っているので、react-router をおさらいするためにサンプルコードをざっと読んでみました。
以下、読んだときのメモ。
Active Links
<Link> の activeStyle アトリビュートでリンクがアクティブなときのスタイルを定義できる。
Animations
URL遷移をする際に componentWillReceiveProps が呼び出されて遷移先のパスが取得できるということは理解した。
あと ...props は使いどころによっては便利だと思いました。
Auth Flow
<Route> の onEnter にコールバックを渡しておくと、そのパスが有効になった際にそいつが呼ばれるようだ。
サンプルではそのコールバック内で未ログイン時にログインコンポーネントを描画するURLに遷移させている。
Auth With Shared Root
<Router> の routes に設定するオブジェクト内で、 <Route> に対応する部分に component で直接描画対象のコンポーネントを指定するのではなく getComponent で描画対象のコンポーネントをコールバック経由で指定する方法を示している。
Breadcrumbs
this.props.routes で現在有効なrouteまでの経路が配列として取れるので、それを元にパンくずを表示できるってことらしい。
Dynamic Segments
<Route path="user/:userID"> のように設定したパラメータは this.props.params としてアクセスできる。
<Recirect> の from と to でも利用できる。
Huge Apps (Partial App Loading)
<Route> の childRoutes も component と同様に getChildRoutes でコールバック関数での設定にできる。
サンプルは require.ensure を通じてオンデマンドでコンポーネントを読み込むように構成されている。
Master Detail
このサンプルで何を伝えたいのかイマイチよくわからないが、Flux臭を感じるのでそこら辺だろうか。
history.pushState を使ってるけど、これは v1.1.0 で router.push に置き換わるはず。
Passing Props to Children
React.cloneElement でレンダリング対象の this.props.children にアトリビュートを設定しているのがミソでしょうか。
Pinterest-style UI (location.state)
<Link> に state アトリビュートでオブジェクトを渡すと、遷移時の componentWillReceiveProps で nextProps.location.state としてアクセスできるということのようだ。
Nested Animations
これもサンプルで示したいことが何なのかイマイチわからない。
アニメーションの実装に必要なコード自体はAnimationsよりすっきりしていて、むしろあっちの方が要らない子なのかも。
Query Params
URLのクエリパラメータは <Link to="/user/bob" query={{ showAge: true }}> のように渡して this.props.location.query で参照できる。
Shared Root
path を指定しないコンポーネントをroutesのツリーに組み込んで、いくつかのパスの共通の親コンポーネントとして構成することができる。
Sidebar
<Route> の components はkey-value形式で複数設定することができる。この形式で設定した場合は、描画コンポーネントは this.props に children ではなく、 components に指定したキーで取得する。
Transitions
Lifecycle mixin の routerWillLeave でURL遷移の確認ダイアログを実装しているけれど、v1.1.0でmixinは無くなるとかいう話が...
