読者です 読者をやめる 読者になる 読者になる

ryhmrt’s blog

フィリピンから日本に戻った意識低い系プログラマの雑記

react-router の examples をざっと読んでみた

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>fromto でも利用できる。

Huge Apps (Partial App Loading)

<Route>childRoutescomponent と同様に 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 アトリビュートでオブジェクトを渡すと、遷移時の componentWillReceivePropsnextProps.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.propschildren ではなく、 components に指定したキーで取得する。

Transitions

Lifecycle mixin の routerWillLeave でURL遷移の確認ダイアログを実装しているけれど、v1.1.0でmixinは無くなるとかいう話が...